ccfa1e241fa0901145350afe59049b26f345df14
chmalee
  Tue Jul 30 15:34:54 2024 -0700
Some style changes to hgSearch requested by Mark and Lou. One is fix resizing of columns when the window has been made small. Two is make font size of track titles larger, refs Mark email and #33503

diff --git src/hg/htdocs/inc/hgSearch.html src/hg/htdocs/inc/hgSearch.html
index a0382a5..56f84f6 100644
--- src/hg/htdocs/inc/hgSearch.html
+++ src/hg/htdocs/inc/hgSearch.html
@@ -19,86 +19,101 @@
 }
 
 /* Anytime the body has the loading class, our
    modal element will be visible */
 body.loading .modal {
     display: block;
 }
 
 .jstree-anchor {
     height: auto !important;
     white-space: normal !important;
 }
 
 .liNoStyle {
     list-style-type: none;
+    font-size: larger;
+}
+
+.searchResult {
+    font-size: 14px;
 }
 
 .showMoreDiv {
     display: inline;
 }
 
 .headerSpacer {
     padding-top: 15px;
 }
 
 .rowSpacer {
     padding-top: 5px;
 }
 
 .ulNoStyle {
     padding-left: 0;
 }
 
 .selectSpecies {
-    width: 150px;
+    max-width: 100%;
 }
 
 .selectDb {
-    width: 300px;
+    max-width: 100%;
+}
+
+#grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(150px,400px) 1fr;
+    gap: 25px;
+    padding-left: 15px;
+}
+
+.selectWrap {
+    min-width: 0;
 }
 </style>
 
-<div class="container-fluid">
-    <div class="row"> <!-- for some reason this empty row div is necessary to get two columns? -->
-    </div>
-    <div class="row">
-        <div class="col-lg-4">
+<div id="grid">
+    <div>
         <div class='gbSectionBanner searchTitle'>Search across the Genome Browser site</div>
         <div class="headerSpacer"> </div>
         Search<br>
+        <div class="selectWrap">
             <select name="speciesSelect" id="speciesSelect" class="selectSpecies"></select>
-            &nbsp;
+        </div>
+        <div class="selectWrap">
             <select name="dbSelect" id="dbSelect" class="selectDb"></select>
+        </div>
         for
-            <div class="rowSpacer">
-                <input size=50 name="searchString" id="searchBarSearchString" type="text" placeholder="bigWig"></input>
+        <div class="rowSpacer"></div>
+        <input name="searchString" id="searchBarSearchString" type="text" placeholder="bigWig"></input>
         <input name="searchButton" id="searchBarSearchButton" type="submit" value="Search"></input>
         <p>Use the tree to hide/show results from only these categories. Hover your mouse over each category for an explanation:</p>
-                <div id="searchCategories" style="overflow-y:auto"> <!-- this will get populated by the javascript later -->
-                </div>
+        <div id="searchCategories"> <!-- this will get populated by the javascript later -->
         </div>
     </div>
-        <div class="col-lg-8">
+    <div>
         <div id="searchResultsBar" class="gbSectionBanner">Search Results
             <span id="dbPlaceholder"></span>
         </div>
-            <div id="searchResults" class="headerSpacer" style="overflow-y:auto">
+        <div id="searchResults" class="headerSpacer">
         </div>
     </div>
-    </div> <!-- row -->
-</div> <!-- container-fluid -->
+</div> <!-- grid -->
 <div class="container-fluid">
 <div class="help-text gbsPage">
   <div class="row"></div>
   <div class="row">
   <div class="col-md-12">
     <h2>Using the Genome Browser Search</h2>
     <!-- <div class="headerSpacer"></div> -->
     <p>
     The Genome Browser search page shows matches to words in track data, track
     names and/or descriptions, help docs, and public hub track names and/or
     descriptions. Clicking on a match does one of the following:
     <ul>
       <li>navigates to the Genome Browser track display at the location of the track item</li>
       <li>navigates to the help page matching the search term</li>
       <li>navigates to the configuration page for the track/public hub track</li>