From 88b95fd870ec3c01cd95e233f0f610e827955c46 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 16 Dec 2020 17:27:58 -0500
Subject: [PATCH] Add min-width to flex columns for responsive layout on small
 screens

The .crm-flex-box class is new and only used in 2 places: Search Kit & the Dashboard.
This sets a min-width on those layouts so the 2 columns collapse to 1 on small screens.
---
 css/civicrm.css                                     | 1 +
 css/dashboard.css                                   | 7 +++++++
 ext/search/ang/crmSearchAdmin/compose/criteria.html | 4 ++--
 ext/search/css/search.css                           | 4 ++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index 722d5588ee..519289821c 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -21,6 +21,7 @@
 
 .crm-container .crm-flex-box {
   display: flex;
+  flex-wrap: wrap;
 }
 .crm-container .crm-flex-box > * {
   flex: 1;
diff --git a/css/dashboard.css b/css/dashboard.css
index 88296b1be7..2586b3c901 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -2,6 +2,13 @@
   min-height: 200px;
 }
 
+#civicrm-dashboard > .crm-flex-box > .crm-flex-2 {
+  min-width: 300px;
+}
+#civicrm-dashboard > .crm-flex-box > .crm-flex-3 {
+  min-width: 450px;
+}
+
 .crm-container .crm-dashlet {
   margin: 10px;
   box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
diff --git a/ext/search/ang/crmSearchAdmin/compose/criteria.html b/ext/search/ang/crmSearchAdmin/compose/criteria.html
index 0f76581826..78c75a391a 100644
--- a/ext/search/ang/crmSearchAdmin/compose/criteria.html
+++ b/ext/search/ang/crmSearchAdmin/compose/criteria.html
@@ -1,5 +1,5 @@
 <div class="crm-flex-box">
-  <div>
+  <div class="crm-search-criteria-column">
     <div ng-if=":: $ctrl.paramExists('join')">
       <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join">
         <div class="form-inline">
@@ -36,7 +36,7 @@
       </fieldset>
     </fieldset>
   </div>
-  <div>
+  <div class="crm-search-criteria-column">
     <fieldset class="api4-clause-fieldset">
       <crm-search-clause clauses="$ctrl.savedSearch.api_params.where" format="string" op="AND" label="{{ ts('Where') }}" fields="fieldsForWhere" ></crm-search-clause>
     </fieldset>
diff --git a/ext/search/css/search.css b/ext/search/css/search.css
index cfcccfd270..ac01597cd0 100644
--- a/ext/search/css/search.css
+++ b/ext/search/css/search.css
@@ -1,3 +1,7 @@
+#bootstrap-theme .crm-search-criteria-column {
+  min-width: 500px;
+}
+
 #bootstrap-theme #crm-search-results-page-size {
   width: 5em;
 }
-- 
2.25.1