fix: Let the Subject column absorb all leftover table width

Author: bzg

resources/bone-index.js

@@ -1302,8 +1302,10 @@ var _setupToggles, _showTogglesIfNeeded;
 (function() {
   var style = document.createElement('style');
   style.textContent =
-    /* nth-child(8) = the Subject column */
-    'td:nth-child(8) { position: relative; white-space: nowrap; overflow: hidden; max-width: 740px; }' +
+    /* nth-child(8) = the Subject column.  max-width:0 with the
+       width:100% from the page CSS = fluid truncating column: it takes
+       all the space the other columns leave, and clips beyond that. */
+    'td:nth-child(8) { position: relative; white-space: nowrap; overflow: hidden; max-width: 0; }' +
     'td:nth-child(8).expanded { white-space: normal; overflow: visible; }' +
     '.unfold { position: absolute; right: 0; top: 50%; transform: translateY(-50%);' +
     '  cursor: pointer; font-weight: 700; font-size: 1em;' +

scripts/bone-index.clj

@@ -72,7 +72,16 @@
   tr.stripe td       { background-color: var(--bone-stripe-bg); }
   tr:not(.stripe) td { background-color: var(--bone-row-bg); }
   td:nth-child(3) { white-space: nowrap; }
-  td:nth-child(8) { min-width: 740px; }                                   /* Subject */
+  /* The table always fills the container (even with columns hidden via
+     --html-columns) and Subject soaks up all the leftover width: the
+     width:100% td is the greedy column, truncated at its allotted space
+     by the max-width:0 rule injected from bone-index.js.  The 740px
+     floor lives on the th: putting min-width on the td would clamp its
+     max-width:0 back up to 740px (CSS 2.1 §10.4) and re-freeze the
+     column at exactly 740px. */
+  #reports-table table { width: 100%; }
+  td:nth-child(8) { width: 100%; }                                        /* Subject */
+  th:nth-child(8) { min-width: 740px; }                                   /* Subject floor */
   td:nth-child(7) { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Author */
   #status { font-size: 0.8rem; margin-bottom: 0.5rem; }
   .row-icon { font-size: 0.75rem; text-decoration: none; }
@@ -96,7 +105,7 @@
   }
   @media (max-width: 860px) {
     td:nth-child(2), th:nth-child(2) { display: none; } /* Priority */
-    td:nth-child(8) { min-width: auto; }                /* Subject */
+    th:nth-child(8) { min-width: auto; }                /* Subject floor */
   }
   @media (max-width: 780px) {
     td:nth-child(5), th:nth-child(5) { display: none; } /* Replies */