d40ace87860e49440a8ffcd09a4a68a682ad07ec
chmalee
  Thu Apr 23 12:57:12 2026 -0700
add nowrap rules to more settings in the hubSpace data table to prevent row heights from growing when a filename is too long for the current window size and forces an adjustment by Data Tables. adjust columns when the window size grows dynamically. this should ensure the view in buttons are always the same size regardless of screen width or table content, refs Max/Baihe email

diff --git src/hg/htdocs/style/hgMyData.css src/hg/htdocs/style/hgMyData.css
index 49554ba1522..a8b2f2ffcfd 100644
--- src/hg/htdocs/style/hgMyData.css
+++ src/hg/htdocs/style/hgMyData.css
@@ -1,73 +1,81 @@
 #fileList {
     display: grid;
     grid-template-columns: 20px 2fr 1fr 1fr 1fr;
     column-gap: 2px;
 }
 
 .fileListHeader {
     display: none;
 }
 
 .batchTypeSelect {
     grid-column-start: 3;
 }
 
 .batchDbSelect {
     grid-column-start: 4;
 }
 
 .button {
     background-color: #E8E8E8;
     padding: 5px 10px;
     border-radius: 5px;
     border: 1px ridge black;
     font-size: 0.8rem;
 }
 
 .pickedFiles {
 }
 .pickedFile {
     font-size: smaller;
 }
 
 #filesDiv table.dataTable input.dt-select-checkbox {
   appearance: auto;
   position:relative;
   display:inline-block;
   width:12px;
   height:12px;
   border:1px solid;
   border-radius:3px;
   vertical-align:middle;
   margin-top:1px;
   color:inherit;
   font-size:20px;
   line-height:1em;
 }
 
 table.dataTable input.dt-select-checkbox:checked:after,
 table.dataTable input.dt-select-checkbox:indeterminate:after {
   content: none;
 }
 
 /* make the search bar and table have rows have a normal white background */
 #filesDiv input.dt-input,#filesDiv .dt-scroll-body {
     background-color: #f9f9f9;
 }
 
 .breadcrumb {
     text-decoration: underline;
     cursor: pointer;
     font-size: larger;
 }
 
+#filesTable td.nowrap, #filesTable th.nowrap {
+    white-space: nowrap;
+}
+
+#filesDiv {
+    overflow-x: auto;
+}
+
 /* Prevent the page from jumping around slightly when a button gets added
  * into this div */
 #selectedFileInfo {
     height: 1.2em;
 }
 
 .uppy-Dashboard-inner {
     width: 85% !important;
     height: 75% !important;
 }