Merge pull request #116 from niteeshkanna-sh/claude/stoic-rubin-fnglq7

Records lists: scroll the table, pin the actions

Author: niteeshkanna-sh

admin/admin.css

@@ -1360,15 +1360,34 @@ label.finance-toggle {
 }
 .rec-icon-btn:hover { background: var(--bg); color: var(--ink); }
 
+/* A window onto the table rather than the whole of it.
+
+   Both ways: sideways because a row is one line now and a line of eight
+   columns is wider than the panel, and downwards because a page of records is
+   taller than the screen and scrolling the whole page took the column names
+   away with it. Capped rather than fixed, so three bookings still make a short
+   table.
+   
+   overscroll-behavior stops a flick that reaches the bottom of this box from
+   carrying on and scrolling the page behind it. */
 .rec-tablewrap {
   background: var(--surface); border: 1px solid var(--border);
-  border-radius: 16px; overflow-x: auto;
+  border-radius: 16px; overflow: auto;
+  max-height: min(72vh, 700px);
+  overscroll-behavior: contain;
 }
-.rec-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
+
+/* separate, not collapse: a collapsed border belongs to the table rather than
+   to the cell, and a sticky cell carries its own borders with it or carries
+   none at all. With no vertical rules in this table the two look identical. */
+.rec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
 .rec-table th {
   text-align: left; padding: 13px 12px; white-space: nowrap;
   font-size: 0.71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
   color: var(--ink-faint); border-bottom: 1px solid var(--border); background: var(--surface);
+  /* Stays on screen while the rows go past it. A column of dates with no
+     heading is a column of numbers. */
+  position: sticky; top: 0; z-index: 2;
 }
 .rec-table th.is-sortable { cursor: pointer; user-select: none; }
 .rec-table th.is-sortable:hover { color: var(--ink); }
@@ -1387,20 +1406,20 @@ label.finance-toggle {
    cost the row a line for nothing. */
 .rec-table .rec-when { white-space: nowrap; }
 
-/* A cell laid out across instead of down.
+/* A cell laid out across instead of down, and kept that way.
 
-   It wraps rather than forcing the table sideways. Nowrap on the whole line
-   would have made the column's minimum width its full length, and eight such
-   columns come to about 1390 pixels -- fine on a desk, a horizontal scrollbar
-   on a 1280 laptop. Wrapping means the line is one line wherever it fits and
-   quietly becomes two where it does not, which is what the old stacked layout
-   was doing everywhere.
+   It used to wrap when the panel ran out of room, which kept the table inside
+   the window at the cost of the thing the layout was for: at 1440 the rows
+   folded back to two lines and no two rows folded in the same place, so the
+   columns stopped lining up. The box above scrolls instead. A row is one line
+   at every width now, every row the same height, and the eye can run down a
+   column.
 
-   The parts themselves never break: half a phone number on each of two lines
-   is worse than either. */
+   Nothing inside breaks either: half a phone number on each of two lines is
+   worse than either half. */
 .rec-table .rec-line {
-  display: flex; flex-wrap: wrap; align-items: baseline;
-  column-gap: 7px; row-gap: 1px; min-width: 0;
+  display: flex; align-items: baseline;
+  gap: 7px; min-width: 0; white-space: nowrap;
 }
 .rec-table .rec-line > * { flex: none; white-space: nowrap; }
 
@@ -1421,8 +1440,31 @@ label.finance-toggle {
 
 /* Two pills read as one unit, and sit centred on each other rather than on a
    baseline their padding has already moved. */
-.rec-table .rec-line-chips { align-items: center; column-gap: 6px; row-gap: 5px; }
-.rec-table .rec-act { width: 1%; white-space: nowrap; }
+.rec-table .rec-line-chips { align-items: center; gap: 6px; }
+/* The actions stay against the right edge while the rest of the row slides
+   under them. They are the reason most people are looking at the list at all,
+   and hunting for them by scrolling is a strange thing to ask.
+
+   Opaque, because the row passes behind it -- including on hover, which the
+   row's own background change would otherwise leave stranded here. The rule
+   down its left edge is what says the column is pinned rather than merely
+   last. */
+.rec-table .rec-act {
+  width: 1%; white-space: nowrap;
+  position: sticky; right: 0; z-index: 1;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+}
+/* The shadow only when there is something passing underneath. On a screen
+   wide enough for the whole table this is simply the last column, and an edge
+   drawn there would be an edge drawn for no reason. The class is set by
+   renderRecTable, which is the only thing that knows. */
+.rec-tablewrap.has-overflow-x .rec-act {
+  box-shadow: -10px 0 10px -10px rgb(0 0 0 / 0.18);
+}
+.rec-table tbody tr:hover .rec-act { background: var(--bg); }
+/* The corner: pinned both ways, so it must sit above both. */
+.rec-table thead .rec-act { z-index: 3; }
 .rec-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
 /* On the last part of the name line rather than on the name itself. The name
    clips with an ellipsis now, so a marker inside it would vanish exactly when

admin/admin.js

@@ -1582,7 +1582,12 @@ function renderRecTable(opts) {
             <th class="rec-sno">S. No</th>
             ${columns.map((c) => `
               <th class="is-sortable${c.key === view.sort ? ' is-sorted' : ''}${
-                  c.hide ? ' rec-hide-sm' : ''}" data-sort="${c.key}"
+                  c.hide ? ' rec-hide-sm' : ''}${
+                  // The column's own class on the heading as well as the cells.
+                  // Width, alignment and -- the reason it was added -- being
+                  // pinned to an edge are properties of the column, and a
+                  // heading that does not share them slides off on its own.
+                  c.cls ? ` ${c.cls}` : ''}" data-sort="${c.key}"
                   aria-sort="${c.key === view.sort ? (view.dir === 'asc' ? 'ascending' : 'descending') : 'none'}">
                 ${escapeHTML(c.label)}<span class="ord">${
                   c.key === view.sort ? (view.dir === 'asc' ? '▲' : '▼') : '⇅'}</span>
@@ -1600,6 +1605,17 @@ function renderRecTable(opts) {
       </table>
     </div>`;
 
+  // Whether the pinned Action column has anything sliding under it. CSS
+  // cannot ask that question, and the answer changes with the window, with
+  // the sidebar, and with the longest name in the current page of rows.
+  const box = wrap.querySelector('.rec-tablewrap');
+  const table = box.querySelector('.rec-table');
+  const markOverflow = () => {
+    box.classList.toggle('has-overflow-x', table.scrollWidth > box.clientWidth + 1);
+  };
+  markOverflow();
+  new ResizeObserver(markOverflow).observe(box);
+
   wrap.querySelectorAll('th[data-sort]').forEach((th) => {
     th.addEventListener('click', () => {
       const key = th.dataset.sort;

build.json

@@ -1,8 +1,8 @@
 {
-  "publishedAt": "2026-10-01T07:48:03.413Z",
-  "commit": "54970509",
-  "commitAt": "2026-09-30T12:01:16+05:30",
-  "sourceHash": "04add428efb68d32",
+  "publishedAt": "2026-10-01T08:06:37.036Z",
+  "commit": "d255036d",
+  "commitAt": "2026-10-01T13:19:43+05:30",
+  "sourceHash": "9a1db0a8e403649e",
   "assets": [
     "About-BzCVrfp8.js",
     "Bikes-Dv_LRU5Z.js",