index.html: fix list-view column resize not persisting (CSS-class sort arrows)

a6365d0d2c49a20418841c850047bcf4b50777e8 · 2026-07-31 12:27:44 -0700 · Steve Abrams

Root cause (traced via Playwright): the list-view resize worked DURING the drag
(col width tracked cleanly) but reverted on release/sort. index baked a literal
▲/▼ into the <th> TEXT, which changes col-resize.js's tableSig (a hash of header
text) on every re-render — so after the post-drag table rebuild, the saved width
couldn't be reloaded and the column snapped back.

Fix: emit the sort arrow as a CSS ::after class (asc/desc) like the broker-grid
reference, keeping header text stable. Now col-resize's tableSig-keyed widths
survive re-render.

Verified (Playwright, :9911): column 141->221px persists after drag-release AND
holds through a deliberate sort; sort-direction arrow still renders (::after ' ▼');
0 pageerrors. Closes the last open CRCP list-build-rule item. TK-10089.

Files touched

M public/index.html

Diff

commit a6365d0d2c49a20418841c850047bcf4b50777e8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Jul 31 12:27:44 2026 -0700

    index.html: fix list-view column resize not persisting (CSS-class sort arrows)
    
    Root cause (traced via Playwright): the list-view resize worked DURING the drag
    (col width tracked cleanly) but reverted on release/sort. index baked a literal
    ▲/▼ into the <th> TEXT, which changes col-resize.js's tableSig (a hash of header
    text) on every re-render — so after the post-drag table rebuild, the saved width
    couldn't be reloaded and the column snapped back.
    
    Fix: emit the sort arrow as a CSS ::after class (asc/desc) like the broker-grid
    reference, keeping header text stable. Now col-resize's tableSig-keyed widths
    survive re-render.
    
    Verified (Playwright, :9911): column 141->221px persists after drag-release AND
    holds through a deliberate sort; sort-direction arrow still renders (::after ' ▼');
    0 pageerrors. Closes the last open CRCP list-build-rule item. TK-10089.
---
 public/index.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3873734..4de2864 100644
--- a/public/index.html
+++ b/public/index.html
@@ -174,6 +174,8 @@
   .listtbl td.stick, .listtbl th.stick { text-align:left; position:sticky; left:0; background:var(--card); }
   .listtbl th.stick { background:#0b0e13; z-index:2; }
   .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); }
   /* draggable column reorder on the PRIMARY list table (Steve list-build rule) */
   .listtbl th.dragcol { cursor:grab; }
   .listtbl th.dragging { opacity:.45; }
@@ -869,9 +871,11 @@ function colCell(k,p){ const f=p.finance||{};
 }
 function renderList(rows){
   const cols=listCols();
-  const arrow=k=>colSort&&colSort.key===k?(colSort.dir>0?' ▲':' ▼'):'';
+  // arrow as a CSS CLASS (asc/desc), NOT literal text — keeps the <th> text stable so col-resize's
+  // tableSig doesn't change on sort and saved column widths survive the re-render (TK-10089).
+  const arrow=k=>colSort&&colSort.key===k?(colSort.dir>0?' asc':' desc'):'';
   // "Property" (addr) stays a fixed anchor; the rest are draggable to reorder + click to sort.
-  const head='<th scope="col" class="stick sortable" data-sortk="addr" title="Sort by address">Property'+arrow('addr')+'</th>'+cols.map(c=>`<th scope="col" class="sortable dragcol" draggable="true" data-sortk="${c.k}" data-k="${c.k}" title="Drag to reorder · click to sort by ${esc(c.label)}">${esc(c.label)}${arrow(c.k)}</th>`).join('');
+  const head='<th scope="col" class="stick sortable'+arrow('addr')+'" data-sortk="addr" title="Sort by address">Property</th>'+cols.map(c=>`<th scope="col" class="sortable dragcol${arrow(c.k)}" draggable="true" data-sortk="${c.k}" data-k="${c.k}" title="Drag to reorder · click to sort by ${esc(c.label)}">${esc(c.label)}</th>`).join('');
   const body=rows.map(p=>`<tr class="lrow" data-id="${p.id}" title="Click to open the agent window (contact · letters · find · comps · history)">`
     +`<td class="stick"><span class="exptog" aria-hidden="true" title="Open agent window">⧉</span><button class="starbtn ${SHORT.has(p.id)?'on':''}" data-star="${p.id}" aria-label="${SHORT.has(p.id)?'Remove from':'Add to'} shortlist" aria-pressed="${SHORT.has(p.id)}" title="Shortlist">★</button> <span class="la">${esc(p.address)}</span><div class="lc">${esc(p.city)}, CA ${p.zip||''}</div></td>`
     +cols.map(c=>`<td>${colCell(c.k,p)}</td>`).join('')+`</tr>`).join('');

← ebb3d7b warrantability: extract fhaEffectiveSignal helper, wire all · back to Commercialrealestate · auto-save: 2026-07-31T12:27:46 (3 files) — data/condos-redfi 1635fcc →