[object Object]

← back to Ticket System

board: move ticket nav bar to a full-width strip across the top

ae20b9e21e49d16e5817737a33cd6a62bfcbd96f · 2026-09-11 12:32:03 -0700 · Steve Abrams

Pull .globalnav (All/Open/Blocked/Doing/Agents/Skills) out of the crowded
wrapping header and give it its own full-width sticky bar above the toolbar.
Nav + header now share one sticky container so they stay glued to the top.

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

Files touched

Diff

commit ae20b9e21e49d16e5817737a33cd6a62bfcbd96f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Sep 11 12:32:03 2026 -0700

    board: move ticket nav bar to a full-width strip across the top
    
    Pull .globalnav (All/Open/Blocked/Doing/Agents/Skills) out of the crowded
    wrapping header and give it its own full-width sticky bar above the toolbar.
    Nav + header now share one sticky container so they stay glued to the top.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01QMDd11h9e9gLvFRu28oknU
---
 board.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/board.html b/board.html
index 3278453d..605a796a 100644
--- a/board.html
+++ b/board.html
@@ -13,7 +13,11 @@
   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)}
-  header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:7}
+  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)}
+  /* ticket nav bar — full-width strip across the very top */
+  .globalnav.topnav{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg);padding:8px 14px;gap:6px;overflow-x:auto}
+  .globalnav.topnav button{padding:8px 14px;font-size:11px}
   h1{font-size:15px;margin:0;letter-spacing:.06em;white-space:nowrap}
   .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:3px 9px;cursor:pointer;user-select:none}
   .pill b{color:var(--ink)} .pill.on{outline:1px solid var(--acc)}
@@ -106,9 +110,10 @@
   .kvrow{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--rowline);padding:10px 4px}.kvrow h3{width:230px;flex:0 0 230px;margin:0;font:700 12px ui-monospace,Menlo,monospace}.kvmeta{display:flex;gap:14px;flex-wrap:wrap;min-width:0}.kv{font-size:12px}.kv b{color:var(--faint);font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-right:4px}.stamp{display:block;color:var(--faint);font-size:10px;margin-top:8px}
   @media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}.globalnav{order:10;width:100%}.kvrow{align-items:flex-start;flex-direction:column}.kvrow h3{width:auto;flex:auto}}
 </style></head><body>
+<div class="stickytop">
+<nav class="globalnav topnav" aria-label="Fleet viewer"><button data-section="all">All</button><button data-section="open">Open</button><button data-section="blocked">Blocked</button><button data-section="doing">Doing</button><button data-section="agents">Agents</button><button data-section="skills">Skills</button></nav>
 <header>
   <h1>FLEET TICKETS</h1>
-  <nav class="globalnav" aria-label="Fleet viewer"><button data-section="all">All</button><button data-section="open">Open</button><button data-section="blocked">Blocked</button><button data-section="doing">Doing</button><button data-section="agents">Agents</button><button data-section="skills">Skills</button></nav>
   <select class="gsel" id="view" title="Separate actionable work from recurring registries">
     <option value="task">Task Queue</option><option value="continuous_loop">Continuous Loops</option><option value="scheduled_job">Scheduled Jobs</option><option value="all">All</option>
   </select>
@@ -129,6 +134,7 @@
   <button class="btn" id="themeBtn" title="Toggle day / night theme" aria-label="Toggle day or night theme">🌙 Night</button>
   <a class="btn" href="/kanban">Kanban</a><a class="btn" href="/office">Office</a>
 </header>
+</div><!-- /stickytop -->
 <div id="actionbar">
   <span><span class="n" id="seln">0</span> selected</span>
   <select class="gsel" id="runProfile" title="Model used for Run Now">

← 97bd9fd6 TK-11372: ACTIVATED and live-verified; residual symptom spli  ·  back to Ticket System  ·  board: add ⤓/⤒ icon toggle to flip nav bar above/below toolb 1ccfb2d0 →