From ba106522f59add4c68455410fc021b5c17a94a0b Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 8 Dec 2020 18:04:14 -0500
Subject: [PATCH] Search kit: Wider dropdowns for entity selection

---
 ext/search/ang/crmSearchAdmin/compose/criteria.html | 8 ++++----
 ext/search/ang/crmSearchAdmin/crmSearchAdmin.html   | 2 +-
 ext/search/css/search.css                           | 4 ++++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ext/search/ang/crmSearchAdmin/compose/criteria.html b/ext/search/ang/crmSearchAdmin/compose/criteria.html
index 3e9629aeb4..0f76581826 100644
--- a/ext/search/ang/crmSearchAdmin/compose/criteria.html
+++ b/ext/search/ang/crmSearchAdmin/compose/criteria.html
@@ -4,7 +4,7 @@
       <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join">
         <div class="form-inline">
           <label for="crm-search-join-{{ $index }}">{{:: ts('With') }}</label>
-          <input id="crm-search-join-{{ $index }}" class="form-control" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" ng-change="changeJoin($index)" />
+          <input id="crm-search-join-{{ $index }}" class="form-control huge" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" ng-change="changeJoin($index)" />
           <select class="form-control" ng-model="join[1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
         </div>
         <fieldset class="api4-clause-fieldset">
@@ -13,18 +13,18 @@
       </fieldset>
       <fieldset>
         <div class="form-inline">
-          <input id="crm-search-add-join" class="form-control crm-action-menu fa-plus" ng-model="controls.join" crm-ui-select="{placeholder: ts('With'), data: getJoinEntities}" ng-change="addJoin()"/>
+          <input id="crm-search-add-join" class="form-control crm-action-menu fa-plus huge" ng-model="controls.join" crm-ui-select="{placeholder: ts('With'), data: getJoinEntities}" ng-change="addJoin()"/>
         </div>
       </fieldset>
     </div>
     <fieldset ng-if=":: $ctrl.paramExists('groupBy')">
       <div class="form-inline" ng-repeat="groupBy in $ctrl.savedSearch.api_params.groupBy">
         <label for="crm-search-groupBy-{{ $index }}">{{:: ts('Group By') }}</label>
-        <input id="crm-search-groupBy-{{ $index }}" class="form-control" ng-model="$ctrl.savedSearch.api_params.groupBy[$index]" crm-ui-select="{placeholder: ' ', data: fieldsForGroupBy}" ng-change="changeGroupBy($index)" />
+        <input id="crm-search-groupBy-{{ $index }}" class="form-control huge" ng-model="$ctrl.savedSearch.api_params.groupBy[$index]" crm-ui-select="{placeholder: ' ', data: fieldsForGroupBy}" ng-change="changeGroupBy($index)" />
         <hr>
       </div>
       <div class="form-inline">
-        <input id="crm-search-add-groupBy" class="form-control crm-action-menu fa-plus" ng-model="controls.groupBy" crm-ui-select="{placeholder: ts('Group By'), data: fieldsForGroupBy}" ng-change="addParam('groupBy')"/>
+        <input id="crm-search-add-groupBy" class="form-control crm-action-menu fa-plus huge" ng-model="controls.groupBy" crm-ui-select="{placeholder: ts('Group By'), data: fieldsForGroupBy}" ng-change="addParam('groupBy')"/>
       </div>
       <fieldset id="crm-search-build-group-aggregate" ng-if="$ctrl.savedSearch.api_params.groupBy.length" class="crm-collapsible collapsed">
         <legend class="collapsible-title">{{:: ts('Aggregate fields') }}</legend>
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.html
index d1c02673c7..3b9eb17d2d 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.html
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -18,7 +18,7 @@
       </div>
       <div class="crm-flex-4 form-inline">
         <label for="crm-search-main-entity">{{:: ts('Search for:') }}</label>
-        <input id="crm-search-main-entity" class="form-control" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: entities}" ng-disabled="$ctrl.savedSearch.id" />
+        <input id="crm-search-main-entity" class="form-control huge" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: entities}" ng-disabled="$ctrl.savedSearch.id" />
         <div class="btn-group btn-group-md pull-right">
           <button type="submit" class="btn" ng-class="{'btn-primary': status === 'unsaved', 'btn-warning': status === 'saving', 'btn-success': status === 'saved'}" ng-disabled="status !== 'unsaved'" ng-click="$ctrl.save()">
             <i class="crm-i" ng-class="{'fa-check': status !== 'saving', 'fa-spin fa-spinner': status === 'saving'}"></i>
diff --git a/ext/search/css/search.css b/ext/search/css/search.css
index c93f709622..cfcccfd270 100644
--- a/ext/search/css/search.css
+++ b/ext/search/css/search.css
@@ -14,6 +14,10 @@
   margin-top: 20px;
 }
 
+#bootstrap-theme.crm-search .form-control.huge {
+  width: 275px;
+}
+
 #bootstrap-theme.crm-search input.ng-invalid {
   border-color: #8A1F11;
 }
-- 
2.25.1