diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 0f9b4dee..fa997833 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -144,8 +144,8 @@ body.dashboard-shell { right: 0; top: calc(100% + 2px); z-index: 100; - background: var(--surface0); - border: 1px solid var(--surface2); + background: var(--bg-elev); + border: 1px solid var(--purple-dim); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); list-style: none; @@ -163,7 +163,7 @@ body.dashboard-shell { width: 100%; background: none; border: none; - color: var(--text); + color: var(--fg); font-family: inherit; font-size: 0.88em; letter-spacing: 0.05em; @@ -173,7 +173,7 @@ body.dashboard-shell { cursor: pointer; } .tabbar-overflow-item:hover { - background: var(--surface1); + background: var(--border); color: var(--purple); } .tabbar-overflow-item-active { @@ -447,8 +447,8 @@ a:hover { } .agent-menu-btn:hover, .agent-menu-btn:focus-visible { - background: var(--surface1); - color: var(--text); + background: var(--border); + color: var(--fg); opacity: 1; } .agent-menu-btn:focus-visible { @@ -460,8 +460,8 @@ a:hover { right: 0; top: calc(100% + 2px); z-index: 200; - background: var(--surface0); - border: 1px solid var(--surface2); + background: var(--bg-elev); + border: 1px solid var(--purple-dim); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); list-style: none; @@ -475,7 +475,7 @@ a:hover { width: 100%; background: none; border: none; - color: var(--text); + color: var(--fg); font-family: inherit; font-size: 0.82em; letter-spacing: 0.01em; @@ -484,11 +484,11 @@ a:hover { cursor: pointer; } .agent-menu-item:hover { - background: var(--surface1); + background: var(--border); } .agent-menu-sep { height: 1px; - background: var(--surface2); + background: var(--purple-dim); margin: 0.3em 0; } /* Pending state splits queued vs running — queued ops show only @@ -2016,9 +2016,9 @@ body.logs-shell { letter-spacing: 0.05em; transition: background 100ms, color 100ms; } -.logs-tab:hover { background: var(--surface1); color: var(--text); } +.logs-tab:hover { background: var(--border); color: var(--fg); } .logs-tab.logs-tab-active { - background: var(--surface1); + background: var(--border); color: var(--mauve); } @@ -2037,9 +2037,9 @@ body.logs-shell { } .logs-toolbar .journal-unit { - background: var(--surface1); - color: var(--text); - border: 1px solid var(--surface2); + background: var(--border); + color: var(--fg); + border: 1px solid var(--purple-dim); border-radius: 4px; padding: 0.25em 0.5em; font-size: 0.85em; diff --git a/frontend/packages/dashboard/src/tabs.js b/frontend/packages/dashboard/src/tabs.js index 9a295b32..44ce6296 100644 --- a/frontend/packages/dashboard/src/tabs.js +++ b/frontend/packages/dashboard/src/tabs.js @@ -3438,6 +3438,9 @@ window.marked = marked; function updateTabbarOverflow() { const tabbar = $('tabbar'); if (!tabbar || !overflowBtn || !overflowDrop) return; + // Skip dropdown rebuild while it is open — the 1s badge tick would + // replace DOM nodes and cause a flicker mid-interaction. + if (overflowOpen) return; // Collect all tabs that are not JS-hidden (P33RS/M4TR1X may be hidden // by feature-gating) and not already removed from the DOM. @@ -3452,7 +3455,10 @@ window.marked = marked; // Step 2: measure available width (bar width minus overflow-btn width). // We must read layout AFTER restoring all dynamic tabs. - const availWidth = tabbar.clientWidth - overflowBtn.offsetWidth - 8; + // overflowBtn may be hidden (offsetWidth=0) on the very first call; fall + // back to a 32px estimate so the first-pass measurement isn't off. + const btnW = overflowBtn.offsetWidth || 32; + const availWidth = tabbar.clientWidth - btnW - 8; // Step 3: walk dynamic tabs left-to-right, accumulating widths. // Any that go over the available width get overflowed.