CRCP table view: columns expand full-width + sticky header & frozen first column

3716477371d9fe1add868d18912f8250af8371fa · 2026-08-20 13:11:39 -0700 · Steve

- .listtbl width:max-content (min-width:100%) — columns size to content and scroll
  horizontally instead of being squished/cut off.
- Bound .cr-scroll (the scroll container col-resize.js wraps the table in — the th's
  actual nearest scroller, NOT .listwrap) with max-height so the sticky header (thead
  top:0) and sticky first column (td.stick left:0) freeze while scrolling both axes.
- z-index layering: header row(2) > first col(1), corner(3) highest.
Verified on :9911 — header & first col freeze, both axes scroll, infinite-scroll intact.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public/index.html

Diff

commit 3716477371d9fe1add868d18912f8250af8371fa
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Aug 20 13:11:39 2026 -0700

    CRCP table view: columns expand full-width + sticky header & frozen first column
    
    - .listtbl width:max-content (min-width:100%) — columns size to content and scroll
      horizontally instead of being squished/cut off.
    - Bound .cr-scroll (the scroll container col-resize.js wraps the table in — the th's
      actual nearest scroller, NOT .listwrap) with max-height so the sticky header (thead
      top:0) and sticky first column (td.stick left:0) freeze while scrolling both axes.
    - z-index layering: header row(2) > first col(1), corner(3) highest.
    Verified on :9911 — header & first col freeze, both axes scroll, infinite-scroll intact.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/index.html | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 680e9c8..df961e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -221,12 +221,19 @@
   .minibtn:hover { border-color:var(--blue); color:var(--ink); }
   /* ---- list view ---- */
   .listhost { display:block; padding:20px 20px 30px; }
-  .listwrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
-  .listtbl { width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
+  .listwrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
+  /* col-resize.js wraps the table in .cr-scroll (overflow:auto) — THAT is the th's nearest scroll
+     container, so bounding ITS height (not .listwrap's) is what makes the sticky header (thead
+     top:0) AND sticky first column (td.stick left:0) actually freeze while scrolling both axes.
+     --tbl-top = the sticky app-chrome height above the table (tune per layout). */
+  .cr-scroll { max-height:calc(100vh - var(--tbl-top, 178px)); }
+  /* max-content so columns size to their content and expand left/right (no artificial squish);
+     min-width:100% keeps it filling the pane when there are few columns; .listwrap scrolls-x. */
+  .listtbl { width:max-content; min-width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
   .listtbl th, .listtbl td { text-align:right; padding:9px 13px; border-top:1px solid var(--line); }
-  .listtbl th { position:sticky; top:0; background:var(--bg2); color:var(--mut); font-size:10px; text-transform:uppercase; letter-spacing:.5px; border-top:0; z-index:1; }
-  .listtbl td.stick, .listtbl th.stick { text-align:left; position:sticky; left:0; background:var(--card); }
-  .listtbl th.stick { background:var(--bg2); z-index:2; }
+  .listtbl th { position:sticky; top:0; background:var(--bg2); color:var(--mut); font-size:10px; text-transform:uppercase; letter-spacing:.5px; border-top:0; z-index:2; }
+  .listtbl td.stick, .listtbl th.stick { text-align:left; position:sticky; left:0; background:var(--card); z-index:1; }
+  .listtbl th.stick { background:var(--bg2); z-index:3; }  /* corner = header row + first col: highest */
   .listtbl th.sortable { cursor:pointer; } .listtbl th.sortable:hover { color:var(--ink); }
   /* sort arrow via CSS ::after (not literal text) so the header TEXT stays stable and col-resize's tableSig-keyed saved widths survive re-render (TK-10089) */
   .listtbl th.asc::after { content:' ▲'; color:var(--gold); } .listtbl th.desc::after { content:' ▼'; color:var(--gold); }

← 5544021 CRCP: geocode ranked.json (free Census, +zip/latlng on 9286 · back to Commercialrealestate · direct-listings: add density slider (Steve grid rule — every 2645a22 →