Api4 Explorer - Prevent long results from breaking layout

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index 2f7ad0eb148dbd77ce2e62fce46c166af1f6cddf..f28cec6dbe9bc5d297f0bc494cacf38b6a6af003 100644 (file)
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -5,8 +5,8 @@
     {{:: ts('CiviCRM APIv4') }}{{ entity ? (' (' + entity + '::' + action + ')') : '' }}
   </h1>
 
-  <div class="api4-explorer-row">
-      <form name="api4-explorer" class="panel panel-default explorer-params-panel">
+  <div class="api4-explorer-row crm-flex-box">
+      <form name="api4-explorer" class="panel panel-default explorer-params-panel crm-flex-2">
         <div class="panel-heading">
           <div class="form-inline">
             <span ng-mouseenter="help('entity', paramDoc('$entity'))" ng-mouseleave="help()">
@@ -189,7 +189,7 @@
         </div>
       </div>
   </div>
-  <div class="api4-explorer-row">
+  <div class="api4-explorer-row crm-flex-box">
       <div class="panel panel-info explorer-code-panel">
         <ul class="panel-heading nav nav-tabs">
           <li role="presentation" ng-repeat="lang in ::langs" ng-class="{active: selectedTab.code === lang}">

diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index 092f6215d36bc9217c74bc00fa3266e80fcd3a03..d2bd35064775f4d933863347e2a025e97f421539 100644 (file)
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -16,17 +16,10 @@
 #bootstrap-theme .explorer-params-panel .panel-heading .form-inline > .select2-container {
   max-width: 25% !important;
 }
-#bootstrap-theme.api4-explorer-page .api4-explorer-row {
-  display: flex;
-}
-#bootstrap-theme.api4-explorer-page > div > .panel {
-  flex: 1;
+#bootstrap-theme .api4-explorer-row > .panel {
   margin: 10px;
   min-height: 500px;
 }
-#bootstrap-theme.api4-explorer-page > div > form.panel {
-  flex: 2;
-}
 /* Fix weird shorditch style */
 #bootstrap-theme.api4-explorer-page .api4-explorer-row .panel .panel-heading {
   border-bottom-right-radius: 0;