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

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

README.md

@@ -97,8 +97,9 @@ ignored from then on.
   trading rows between the two so the column keeps its total height. Tiles
   sit flush — when two share a vertical edge, hover the seam and the same
   kind of pill appears; drag it to trade width (macOS split-view style).
-- **Fullscreen** (the ⛶ button) is a viewing mode: the menu bar hides, the
+- **Fullscreen** (the ⛶ button) is a viewing mode: the menu bar hides (its
-  occupied columns stretch to the full width, and every column runs to the
+  green tab brings it back, minus the Admin button), the occupied columns
+  stretch to the full width, and every column runs to the
   bottom of the screen — the last tile in each column is stretched to end
   there. A short tile like the clock is never stretched into a ribbon: under
   another tile it slides to the bottom edge and the tile above grows into the
@@ -107,7 +108,9 @@ ignored from then on.
   its normal row height and scrolls.
 - A tile's actions (menus, text size, clear…) live in its **title bar**;
   the small **notch** on the bar's bottom edge hides/shows the whole bar
-  for a clean wall-display look.
+  for a clean wall-display look. The menu bar has the same kind of tab —
+  the green one under the ProdDash name, kept at the left so it never sits
+  on top of a tile's own tab.
 - The **gear** on a tile holds per-tile settings (filters, text size,
   display options) — these belong to this browser's layout, not the server.
 - The **grid icon** — save the current arrangement to the server under a

public/index.html

@@ -42,7 +42,7 @@
       <div class="menu" id="layout-menu" hidden></div>
     </div>
 
-    <a class="tb-btn" href="/admin/" title="Configure modules (server-wide)">
+    <a class="tb-btn" id="admin-link" href="/admin/" title="Configure modules (server-wide)">
       <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
         <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm8.4-2.1.1-1.4-.1-1.4 1.7-1.3-1.6-2.8-2 .7a7.9 7.9 0 0 0-2.4-1.4l-.3-2.1H11l-.3 2.1a7.9 7.9 0 0 0-2.4 1.4l-2-.7L4.7 9.3 6.4 10.6l-.1 1.4.1 1.4-1.7 1.3 1.6 2.8 2-.7a7.9 7.9 0 0 0 2.4 1.4l.3 2.1h2.8l.3-2.1a7.9 7.9 0 0 0 2.4-1.4l2 .7 1.6-2.8-1.7-1.3Z"/>
       </svg>

public/style.css

@@ -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);
+  /* straddles the bar's bottom edge — mostly on the bar, a short lip below
-  left: 50%;
+     it — so it never covers a top-row tile's status dot or title */
-  transform: translateX(-50%);
+  top: calc(var(--topbar-h, 46px) - 8px);
+  left: 12px;
   width: 54px;
   height: 14px;
   padding: 0;
-  background: var(--panel);
+  background: var(--accent);
-  border: 1px solid var(--border);
+  border: none;
-  border-top: none;
   border-radius: 0 0 10px 10px;
   cursor: pointer;
   z-index: 60;
-  opacity: 0.35;
+  opacity: 0.55;
-  transition: opacity 0.15s ease, top 0.22s ease;
+  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; }