From 63f78a8dda5ccf7caf24746f7623bd4fc27ae7d8 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 4 Mar 2021 17:25:37 -0500
Subject: [PATCH] APIv4 Explorer - Fix layout in code tab

---
 ang/api4Explorer/Explorer.html | 10 ++++------
 css/api4-explorer.css          |  8 +++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index fc2cafc78d..2f7ad0eb14 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -199,12 +199,10 @@
           </li>
         </ul>
         <div class="panel-body">
-          <table>
-            <tr ng-repeat="style in code[selectedTab.code]">
-              <td>{{:: style.label }}</td>
-              <td><pre class="prettyprint" ng-bind-html="style.code"></pre></td>
-            </tr>
-          </table>
+          <div ng-repeat="style in code[selectedTab.code]">
+            <label>{{:: style.label }}</label>
+            <div><pre class="prettyprint" ng-bind-html="style.code"></pre></div>
+          </div>
         </div>
       </div>
       <div class="panel explorer-result-panel panel-{{ status }}" >
diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index af5cec80a7..092f6215d3 100644
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -39,12 +39,10 @@
 #bootstrap-theme .panel-heading>li>a {
   background-color: #f1f1f18c
 }
-#bootstrap-theme.api4-explorer-page .explorer-code-panel table td:first-child {
-  width: 6em;
-  word-break: break-word;
-}
-#bootstrap-theme.api4-explorer-page .explorer-code-panel table td pre {
+#bootstrap-theme.api4-explorer-page .explorer-code-panel pre {
   min-height: 3.3em;
+  word-break: break-all;
+  white-space: pre-wrap;
 }
 #bootstrap-theme.api4-explorer-page .explorer-code-panel .panel-heading.nav li a {
   text-transform: uppercase;
-- 
2.25.1