90b8f880be12956b899d973bc565bffdc9b7ce89
jcasper
  Fri Aug 28 08:27:13 2026 -0700
Moving sort comment on the faceted composite UI, and ading a 'hide subtracks', refs #36320

diff --git src/hg/htdocs/style/facetedComposite.css src/hg/htdocs/style/facetedComposite.css
index 7bdf0cc2a1e..204a090052a 100644
--- src/hg/htdocs/style/facetedComposite.css
+++ src/hg/htdocs/style/facetedComposite.css
@@ -40,35 +40,39 @@
     box-sizing: border-box;
     padding-right: 0.5em;
 }
 #filters > div {
     display: flex;
     flex-direction: column;
     gap: 0.3em;
 }
 #filters label {
     display: flex;
     align-items: center;
     gap: 0.3em;
     cursor: pointer;
     user-select: none;
 }
-#theMetaDataTable_wrapper {
+#tableColumn {
     flex: 1 1 auto;
     min-width: 0;
     box-sizing: border-box;
 }
+#theMetaDataTable_wrapper {
+    min-width: 0;
+    box-sizing: border-box;
+}
 /*  Horizontal-scroll box around metadata tables: a too-wide table scrolls
     internally in this instead of spilling off-screen. The toolbar (Show N, paging)
     sits outside this box, so it stays visible at the wrapper's width.
 
     The genome browser page wraps this content in an old-school
     <table width="100%"> that sizes to its content. The "width: 0; min-width: 100%"
     pair stops the metadata table from reporting the (very large) content width,
     the outer table sticks to the page width, the metadata table's min-width:100% makes
     it expand to fill that, and then then metadata's overflow results in a scroll bar.
 */
 .table-xscroll {
     width: 0;
     min-width: 100%;
     overflow-x: auto;
 }
@@ -223,28 +227,21 @@
     white-space: nowrap;
 }
 .filter-chip .remove-chip {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1em;
     line-height: 1;
     padding: 0 0 0 0.25em;
     color: #666;
 }
 .filter-chip .remove-chip:hover {
     color: #c00;
 }
 
-/* One-line hint above the facets and table: the table's row order sets the order
-   the tracks are drawn in the browser image.  Kept to a single muted line so the
-   page stays uncluttered - the details are in the info icon's hover text.
-   Font size comes from the .smallText class in HGStyle.css. */
 #sortNote {
     color: #555;            /* same muted grey as the loading indicator */
     padding-bottom: 0.6em;
-    /* The table below is picked out by its header band and the All/Selected tabs,
-       but the facet names are only bold text, so without a rule here the note runs
-       straight into them.  Matches the #active-filters separator above. */
     border-bottom: 1px solid #ddd;
     margin-bottom: 0.75em;
 }