c44fed5433b4c6c083eca0c0dcbdb49ee253a721
jcasper
  Mon Jun 1 21:54:30 2026 -0700
Fix for metadata tables in faceted composites stretching past the width of
the screen.  They should now get a horizontal scroll bar.  refs #36320

diff --git src/hg/htdocs/style/facetedComposite.css src/hg/htdocs/style/facetedComposite.css
index c97c306be44..3802075d011 100644
--- src/hg/htdocs/style/facetedComposite.css
+++ src/hg/htdocs/style/facetedComposite.css
@@ -24,30 +24,45 @@
     flex-direction: column;
     gap: 0.3em;
 }
 #filters label {
     display: flex;
     align-items: center;
     gap: 0.3em;
     cursor: pointer;
     user-select: none;
 }
 #theMetaDataTable_wrapper {
     flex: 1 1 auto;
     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;
+}
 #theMetaDataTable {
     width: 100% !important;
     box-sizing: border-box;
     box-shadow: 0 0 0 1px #ddd;
 }
 /* Light blue background for the table header (column titles + search row) */
 #theMetaDataTable thead th,
 #theMetaDataTable thead td {
     background-color: lightblue;
 }
 #theMetaDataTable td:nth-child(n+2),
 #theMetaDataTable th:nth-child(n+2) {
     vertical-align: top;
     /* white-space: nowrap; */
     /* overflow: hidden;          /* hide overflow */