Smooth column resize: drag a guide line (no per-frame 2500-row reflow), apply width once on release; resize cursor + wider grab handle. Fixes jolty resize UX

10ea7735ac4192765578372552bc66d77d2f6fc8 · 2026-08-13 14:52:19 -0700 · Steve Abrams

Files touched

M public_live/index.html

Diff

commit 10ea7735ac4192765578372552bc66d77d2f6fc8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 13 14:52:19 2026 -0700

    Smooth column resize: drag a guide line (no per-frame 2500-row reflow), apply width once on release; resize cursor + wider grab handle. Fixes jolty resize UX
---
 public_live/index.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/public_live/index.html b/public_live/index.html
index 62c04d2..5124a9d 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -63,8 +63,10 @@
   th.dragging{opacity:.5} th.droptarget{box-shadow:inset 3px 0 0 var(--accent)}
   thead th{position:sticky;top:0;background:var(--panel2);text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);font-size:11px;color:var(--dim);white-space:nowrap;z-index:5;cursor:pointer;position:sticky;overflow:hidden;text-overflow:ellipsis}
   thead th:hover{color:var(--accent)}
-  th .rz{position:absolute;right:0;top:0;height:100%;width:7px;cursor:col-resize;z-index:6}
+  th .rz{position:absolute;right:0;top:0;height:100%;width:8px;cursor:col-resize;z-index:6}
   th .rz:hover{background:var(--accent)}
+  .rzguide{position:fixed;top:48px;bottom:0;width:2px;background:var(--accent);z-index:200;pointer-events:none;box-shadow:0 0 6px var(--accent)}
+  body.resizing,body.resizing *{cursor:col-resize !important;user-select:none !important}
   table{table-layout:fixed}
   td{overflow:hidden;text-overflow:ellipsis}
   tbody td{padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:top;max-width:320px}
@@ -383,12 +385,17 @@ function wireGrid(){
   // resizable columns — drag a column's right edge; width persists per tab
   $$('#grid th .rz').forEach(rz=>rz.addEventListener('mousedown',e=>{
     e.preventDefault();e.stopPropagation();
-    const th=rz.closest('th'); th.draggable=false;               // don't let a resize start a column move
     const ci=+rz.dataset.c, cols=visCols(), idx=cols.findIndex(c=>c.i===ci);
     const col=document.querySelectorAll('#grid colgroup col')[idx+1];  // +1 for the action col
     const startX=e.clientX, startW=col.getBoundingClientRect().width;
-    const mv=ev=>{const w=Math.max(48,startW+(ev.clientX-startX));col.style.width=w+'px';COLW[ci]=Math.round(w);};
-    const up=()=>{document.removeEventListener('mousemove',mv);document.removeEventListener('mouseup',up);LS.set('colw.'+GID,COLW);setTimeout(()=>{th.draggable=true},60);};
+    // SMOOTH: drag a light guide line (no per-frame table reflow); apply width once on release
+    document.body.classList.add('resizing');
+    const guide=document.createElement('div'); guide.className='rzguide'; guide.style.left=e.clientX+'px'; document.body.appendChild(guide);
+    let newW=startW;
+    const mv=ev=>{ newW=Math.max(60,startW+(ev.clientX-startX)); guide.style.left=(startX+(newW-startW))+'px'; };
+    const up=()=>{ document.removeEventListener('mousemove',mv);document.removeEventListener('mouseup',up);
+      guide.remove(); document.body.classList.remove('resizing');
+      col.style.width=Math.round(newW)+'px'; COLW[ci]=Math.round(newW); LS.set('colw.'+GID,COLW); };
     document.addEventListener('mousemove',mv);document.addEventListener('mouseup',up);
   }));
   // double-click a resize handle to auto-fit the column to its content

← a43fc1d Left panel: column controls — '⤢ Fit all' (auto-expand every · back to Rentv Sheet Enrich · Fix width-weird-on-click: table width = exact sum of column 2c2d33c →