From e869b1fe8b7c598c156a866ad039cafc8956c701 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sun, 21 Mar 2021 15:11:02 -0400
Subject: [PATCH] Api4 Explorer - Prevent long results from breaking layout

---
 ang/api4Explorer/Explorer.html | 6 +++---
 css/api4-explorer.css          | 9 +--------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index 2f7ad0eb14..f28cec6dbe 100644
--- 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 092f6215d3..d2bd350647 100644
--- 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;
-- 
2.25.1