From 1b0fd212548511b36379c0ddb9a9b6fc00e7b1c6 Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Sun, 19 Jul 2026 11:08:40 +0200 Subject: [PATCH] =?UTF-8?q?Editor-Toolbar:=20b=C3=BCndig=20an=20Nav=20fixe?= =?UTF-8?q?n=20+=20Overflow-Men=C3=BC=20=C3=BCber=20die=20Toolbar=20heben?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Zwei im Bearbeiten-Modus gemeldete Layout-Bugs: 1. Die sticky Editor-Toolbar klebte an der Padding-Kante des Scroll- Containers `.main` (padding-top: --space-6), also mit sichtbarer Lücke unter der Navigation, durch die die scrollende Seite schien. Fix: `top: calc(-1 * var(--space-6))` → die Toolbar pinnt bündig an die Nav. 2. Das „…"-Overflow-Menü der Navigation lag HINTER der Toolbar: `.topbar` steht im DOM vor `.app-body`, hatte aber keinen Stacking-Kontext, also malte die z-index-20-Toolbar in `.main` darüber und verdeckte Menüeinträge. Fix: `.topbar { position: relative; z-index: 30 }` (> 20; Modals mit 1100+ gewinnen weiterhin). Beide am echten Test-Editor mit langer, scrollbarer Seite verifiziert (gap_px=0 nach dem Scrollen; Menü vollständig über der Toolbar). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC --- apps/web/src/styles/base.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index a491c3d..908cd9e 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -72,6 +72,12 @@ button { padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-bg); + /* Own stacking context above the scrolling `.main` content: the nav comes + before `.app-body` in the DOM, so without this the sticky editor toolbar + (z-index 20 inside `.main`) paints over the nav's overflow "…" menu, hiding + its entries. 30 > the toolbar's 20; modals (1100+) still win. */ + position: relative; + z-index: 30; } .topbar__brand { @@ -1076,10 +1082,13 @@ button { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle); - /* Long articles: the toolbar pins to the top of the scrolling content - area instead of scrolling away. */ + /* Long articles: the toolbar pins to the top of the scrolling content area + instead of scrolling away. The scroll container `.main` has a top padding + (`--space-6`); a plain `top: 0` would stick the toolbar at that padding + edge, leaving a visible gap below the nav. Offset by `-1 * --space-6` so it + pins flush against the navigation, with no scrolling page showing through. */ position: sticky; - top: 0; + top: calc(-1 * var(--space-6)); z-index: 20; }