vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(#994,#996): replace undefined CSS vars; guard overflow rebuild when open

Browse source 
dashboard.css used var(--surface0/1/2) and var(--text) throughout the
agent context menu, tabbar overflow dropdown, and logs toolbar — none
of which are declared in base.css (the palette only defines --bg-elev,
--border, --purple-dim, --fg etc). This caused all three dropdowns to
render with a transparent background (issue #996).

Replacements:
  --surface0  → --bg-elev   (dropdown background)
  --surface1  → --border    (hover / active state)
  --surface2  → --purple-dim (border / separator)
  --text      → --fg        (label colour)

Also addresses two argus yellows from the PR #997 review:
- Skip updateTabbarOverflow() early when the dropdown is open; avoids
  DOM flicker from the 1s badge-update tick while the menu is visible.
- Fall back to 32px when overflowBtn.offsetWidth === 0 (hidden on the
  first render) so the initial width measurement is not off.
This commit is contained in:
iris 2026-06-01 19:45:39 +02:00
commit e045a29508
2 changed files with 23 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/packages/dashboard/src/dashboard.css
View file

@ -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;

8
frontend/packages/dashboard/src/tabs.js
View file

@ -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.