fleet deck (board.html): app-shell flex layout so the ticket table scrolls to the last row

48b2ccd2b2d1c46e9edbde74a9cb1d77d1663b42 · 2026-09-15 17:37:25 -0700 · Steve Abrams

Was max-height:calc(100vh - 52px) on .tblwrap — the 52px magic number is
smaller than the real wrapping sticky-header stack, so the scroll region
extended below the window and the bottom rows were unreachable. Made body a
full-height flex column (header flex:0, .tblwrap/#catalog.show flex:1 min-height:0
overflow:auto), bounded #dmwrap. Header-height-agnostic; sticky thead unaffected.
Verified headless: bodyScrolls=false, tblwrap scrollable, last row visible after scroll.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HgXb7b5SZbb9MNZwNZW94q

Files touched

M board.html

Diff

commit 48b2ccd2b2d1c46e9edbde74a9cb1d77d1663b42
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Sep 15 17:37:25 2026 -0700

    fleet deck (board.html): app-shell flex layout so the ticket table scrolls to the last row
    
    Was max-height:calc(100vh - 52px) on .tblwrap — the 52px magic number is
    smaller than the real wrapping sticky-header stack, so the scroll region
    extended below the window and the bottom rows were unreachable. Made body a
    full-height flex column (header flex:0, .tblwrap/#catalog.show flex:1 min-height:0
    overflow:auto), bounded #dmwrap. Header-height-agnostic; sticky thead unaffected.
    Verified headless: bodyScrolls=false, tblwrap scrollable, last row visible after scroll.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01HgXb7b5SZbb9MNZwNZW94q
---
 board.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/board.html b/board.html
index dde57d68..8b8bbb82 100644
--- a/board.html
+++ b/board.html
@@ -12,9 +12,10 @@
         --thbg:#eef1f6;--rowhover:#f0f3f8;--selbg:#e3edfb;--selhover:#d6e6fb;--detbg:#f2f4f8;--grpbg:#eceff4;--rowline:#e7eaf0}
   html[data-theme="light"] tr.grp td{color:#7b4fd0} html[data-theme="light"] .who{color:#7b4fd0}
   *{box-sizing:border-box}
-  body{margin:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink)}
+  html,body{height:100%}
+  body{margin:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;height:100vh;overflow:hidden}
   header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
-  .stickytop{position:sticky;top:0;z-index:8;background:var(--bg);display:flex;flex-direction:column}
+  .stickytop{position:sticky;top:0;z-index:8;background:var(--bg);display:flex;flex-direction:column;flex:0 0 auto}
   /* ticket nav bar — full-width strip across the very top; ⤓ Nav toggles it below the toolbar */
   .topnav{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto}
   .topnav .globalnav{border:0;background:transparent;padding:0;border-radius:0;gap:6px}
@@ -40,7 +41,7 @@
   #dens{width:96px;accent-color:var(--acc)}
   #dtdchip{font-size:11px;color:var(--mut);white-space:nowrap}
   #dtdchip b{color:var(--ink)}
-  .tblwrap{overflow:auto;max-height:calc(100vh - 52px)}
+  .tblwrap{overflow:auto;flex:1 1 auto;min-height:0}
   table.g{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs);white-space:nowrap;table-layout:fixed}
   table.g thead th{position:sticky;top:0;background:var(--thbg);color:var(--mut);text-transform:uppercase;letter-spacing:.3px;font-size:10.5px;
     padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;z-index:2;text-align:left;position:relative;overflow:hidden;text-overflow:ellipsis}
@@ -87,7 +88,7 @@
   .cts{color:var(--faint);font-size:10px;margin-left:6px}
   html[data-theme="light"] .thread .c{color:#2b3038} html[data-theme="light"] tr.det td .c.k-action{color:#1a7a4a}
   /* selection action bar */
-  #actionbar{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--grpbg);position:sticky;top:52px;z-index:6}
+  #actionbar{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--grpbg);position:sticky;top:52px;z-index:6;flex:0 0 auto}
   #actionbar.show{display:flex}
   #actionbar .n{color:var(--acc);font-weight:600}
   .btn.run{border-color:#2b6f52;color:#8fd49a}.btn.run:hover{border-color:#34d399}
@@ -107,7 +108,8 @@
   .convo .chd{font-size:11px;color:#c9a4f2;font-weight:600;margin-bottom:5px}
   .dm{margin:5px 0;padding-top:5px;border-top:1px dashed #2c3140}.dm:first-of-type{border-top:0}.dm .arw{color:var(--mut);margin:0 3px}.dm .dtx{color:#c6ccd8;margin-top:2px}
   #catalog{display:none;padding:16px;--catalog-cols:4}
-  #catalog.show{display:block}.catalog-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.catalog-head h2{margin:0;font:800 20px/1.1 Georgia,serif}.catalog-head small{color:var(--mut)}
+  #catalog.show{display:block;flex:1 1 auto;min-height:0;overflow:auto}
+  #dmwrap{flex:0 0 auto;max-height:50vh;overflow:auto}.catalog-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.catalog-head h2{margin:0;font:800 20px/1.1 Georgia,serif}.catalog-head small{color:var(--mut)}
   .catalog-grid{display:grid;grid-template-columns:repeat(var(--catalog-cols),minmax(220px,1fr));gap:10px}
   .catalog-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}.catalog-card:hover{border-color:var(--acc)}
   .catalog-card h3{margin:0 0 7px;font:700 13px/1.25 ui-monospace,Menlo,monospace;overflow-wrap:anywhere}.catalog-card p{color:var(--mut);font-size:12px;line-height:1.45;margin:7px 0}

← 44aeaf77 Record ordered overnight monitoring cycle with zero implemen · back to Ticket System · Record ordered cycle and verified historical Mylar preparati f17468a6 →