75a1bac8b8addd47d90c5061d9167c581677be5b
jcasper
  Thu Apr 23 08:41:25 2026 -0700
Fix for trackDb docs anchors landing under the javascript search box.
Now they're pushed down a bit below it (more on narrow displays). No ticket

diff --git src/hg/htdocs/goldenPath/help/trackDb/trackDbDoc.css src/hg/htdocs/goldenPath/help/trackDb/trackDbDoc.css
index c9b641b7fd5..77ebff8239e 100644
--- src/hg/htdocs/goldenPath/help/trackDb/trackDbDoc.css
+++ src/hg/htdocs/goldenPath/help/trackDb/trackDbDoc.css
@@ -1,260 +1,272 @@
 /* CSS definitions used by trackDbDoc.html and friends */
 
 H1,H2 {
     text-align: center;
     margin-top:0em;
     margin-bottom:0.1em;
     color: #365f91;
 }
 H3 {
     margin-top: 0.1em;
     margin-bottom: 0in;
     color: #365f91;
 }
 H2.leftAlign { text-align: left; }
 
 /* From our standard BODY tag */
 BODY { background-color:#FFF; }
 Alink { color:#0000CC; }
 A:visited { color:#330066; }
 A:active.topbar { color:#330066; }
 
 CODE { color: #000088; }
 .level-required  { color: #008000; }    /* Green */
 .level-base  { color: #0000A3; }        /* Blue */
 .level-full { color: black; }
 .level-new { color: gray; }
 .level-deprecated { color: #8A0009; }      /* Brown */
 
 PRE { color:#000088; }   /* Blue to stand out */
 I { color:#006600; }     /* Green until issues are dealt with */
 
 DIV.pageWidth {
     width:100%;
     max-width:1000px;
     /* Ensure pageWidth doesn't interfere with sticky positioning */
     position: relative;
 }
 
 /* Section tables */
 TABLE.settingsTable {
     width:98%;
     border-style:none;
     border-collapse:separate;
     border-spacing:0px;
     empty-cells:show;
 }
 TABLE.settingsTable > tbody > tr:not(.related) > td, TABLE.settingsTable > tbody > tr > TH {
     border:0.1em inset gray;
     padding:7px;
 }
 TABLE.settingsTable > tbody > tr > TH {
     font-size:1em;
     color:#FFFFFF;
     background-color:#536ED3;
     text-align:left;
     max-height:20px;
 }
 TABLE.settingsTable > THEAD > TD { border-style:none; }
 TR.related > TD {
     border-top-style:none;           /* Related rows should have light grey divider.  */
     border-left:0.1em inset gray;    /* Cascading failed, so explicitly declared here. */
     border-right:0.1em inset gray;
     border-bottom:0.1em inset gray;
     padding:7px;
 }
 
 /* Standard library blurbs and how they are integrated with sectionTables */
 DIV.details { margin-left:5em; }
 DIV.format {
     margin-left:0.4em;
     display:-moz-inline-stack;
     display:inline-block;
     zoom:1;
     *display:inline;  /* obscure trick for IE to make inline-block work */
 }
 TR.examples { background-color:#F8F8F8; }
 TR.examples DIV.details { margin-left:0em; }
 .toggle  {
     height:16px;
     width:16px;
     vertical-align:top;
     cursor: pointer;
 }
 HR.example {
     border:1px inset #FFFFFF;
     color:#FFFFFF;
 }
 TD.filterBy { display: table-cell; } /* Override css in HGStyle.css */
 
 /* The library itself is always hidden */
 DIV#library { display:none; }
 
 /* Should be defined after settingsTable CSS */
 table.matrixTable {
     text-align: right;
     border-collapse: separate;
     border-spacing: 0px;
     empty-cells: show;
 /*  border-style: solid; */
 }
 table.matrixTable th {
     text-align: center;
     color: black;
     background-color: ##ededed;
     width: 1.9em;
 }
 
 /* additional classes for sectioning/formatting */
 .topBlueBar {
     width:98%;
     height:26px;
     margin-bottom:.4em;
     text-align:left;
     margin-right:1em;
 }
 .topbar {
     height:100%;
     background-color:#2636D1;
     color:#89A1DE;
     text-align:left;
 }
 .contentBorder {
     border: 1px solid black;
     background-color:##ededed;
     margin-bottom:1em;
 }
 .borderGuard { padding:10px; }
 .lightBlueBar {
     background-color:#D9E4F8;
     height:26px;
 }
 .lightBlueBarTitle {
     padding-top:.3em;
     font-size:1.12em;
     font-weight:bold;
 }
 .indent1 { margin-left:1.5em; }
 .hintBox {
     border: 1px inset #000088;
     padding:.3em .5em;
     margin-left:2em;
     margin-right:2em;
     max-width:680px;
 }
 .red { color: #990000; }
 .rejectSection { background-color:#F8F8F8; }
 
 /* Search highlighting styles */
 mark {
     background-color: #ffff99;
     color: #000000;
     padding: 1px 2px;
     border-radius: 2px;
 }
 
 mark.active-result {
     background-color: #ff6b35;
     color: #ffffff;
     font-weight: bold;
     box-shadow: 0 0 3px rgba(255, 107, 53, 0.6);
 }
 
+/* Offset anchor scroll targets so they don't land under the sticky #searchDiv */
+html {
+    scroll-padding-top: 70px;
+}
+
+@media (max-width: 768px) {
+    /* searchDiv stacks vertically below this breakpoint and gets taller */
+    html {
+        scroll-padding-top: 160px;
+    }
+}
+
 #searchDiv {
     position: -webkit-sticky; /* Safari */
     position: sticky;
     top: 0;
     z-index: 99;
     margin: 10px 0;
     padding: 10px;
     background-color: #f8f9fa;
     border: 1px solid #ddd;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 10px;
     backdrop-filter: blur(8px);
     /* Ensure it matches the pageWidth container */
     width: 100%;
     max-width: 1000px;
     box-sizing: border-box;
     /* Ensure no parent containers can interfere */
     contain: layout style;
 }
 
 /* Ensure the sticky search div has proper spacing from any potential fixed headers */
 @media (max-width: 768px) {
     #searchDiv {
         flex-direction: column;
         align-items: stretch;
     }
 
     #searchDiv .search-controls,
     #searchDiv .search-actions {
         justify-content: center;
     }
 
     #tdbSearch {
         width: 100%;
     }
 }
 
 #searchDiv .search-controls {
     display: flex;
     align-items: center;
     gap: 10px;
     flex: 1;
 }
 
 #searchDiv .search-actions {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
 #tdbSearch {
     padding: 6px 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 14px;
     width: 200px;
     min-width: 150px;
 }
 
 .search-button {
     padding: 6px 12px;
     border: 1px solid #007bff;
     border-radius: 4px;
     background-color: #007bff;
     color: white;
     text-decoration: none;
     font-size: 12px;
     cursor: pointer;
     transition: background-color 0.2s;
     white-space: nowrap;
 }
 
 .search-button:hover {
     background-color: #0056b3;
     color: white;
     text-decoration: none;
 }
 
 .search-button.secondary {
     background-color: #6c757d;
     border-color: #6c757d;
 }
 
 .search-button.secondary:hover {
     background-color: #545b62;
     border-color: #545b62;
 }
 
 .search-label {
     font-weight: bold;
     color: #495057;
 }