michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Menubar tab moves under the brand in accent green; Admin hidden in fullscreen

Browse Source 
The menu bar's show/hide tab was centred on the screen, exactly where a
centred tile's own title-bar tab lands once both bars are hidden: two
identical tabs on top of each other, with the tile's unreachable. The tab
now sits at the left under the ProdDash brand and wears the accent colour,
so it never coincides with a tile tab and reads unmistakably as the
dashboard's. To keep it off a top-row tile's status dot and title it
straddles the bar's bottom edge while the bar is shown (mostly on the bar,
a short lip below) and becomes a slim tab at the very top edge when the bar
is hidden.

The Admin link is hidden in fullscreen, including when the menu bar is
brought back there.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
This commit is contained in:
Claude
2026-09-08 22:02:43 +00:00
parent 66f45609f0
commit 483c353843
3 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+17 -12
View File
@@ -54,25 +54,30 @@ body.menu-hidden #topbar {
overflow: hidden;
}
/* the menubar's own show/hide tab, same as the tile notches */
/* The menubar's own show/hide tab. It sits under the ProdDash brand at the
left — not screen-centre, where a tile's own (centred) tab would land
right under it once both bars are hidden — and wears the accent colour
so it never reads as a tile tab. */
#topbar-notch {
position: fixed;
top: var(--topbar-h, 46px);
left: 50%;
transform: translateX(-50%);
/* straddles the bar's bottom edge — mostly on the bar, a short lip below
it — so it never covers a top-row tile's status dot or title */
top: calc(var(--topbar-h, 46px) - 8px);
left: 12px;
width: 54px;
height: 14px;
padding: 0;
background: var(--panel);
border: 1px solid var(--border);
border-top: none;
background: var(--accent);
border: none;
border-radius: 0 0 10px 10px;
cursor: pointer;
z-index: 60;
opacity: 0.35;
transition: opacity 0.15s ease, top 0.22s ease;
opacity: 0.55;
transition: opacity 0.15s ease, top 0.22s ease, height 0.22s ease;
}
#topbar-notch:hover { opacity: 1; }
/* bar hidden: a slim tab at the very top edge, clear of a top-row tile's dot and title */
body.menu-hidden #topbar-notch { top: 0; height: 10px; }
#topbar-notch::after {
content: "";
display: block;
@@ -80,9 +85,8 @@ body.menu-hidden #topbar {
height: 3px;
margin: 4px auto 0;
border-radius: 999px;
background: var(--muted);
background: var(--bg);
}
#topbar-notch:hover::after { background: var(--text); }
#brand {
font-weight: 800;
@@ -486,7 +490,8 @@ body.menu-hidden #topbar {
body.fullscreen .tile-resize,
body.fullscreen .tile-resize-left,
body.fullscreen .tile-resize-bottom,
body.fullscreen .tile-divider { display: none; }
body.fullscreen .tile-divider,
body.fullscreen #admin-link { display: none; }
body.fullscreen #grid { padding-bottom: 0; }
#gridwrap.no-scroll { overflow-y: hidden; }