stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Editor-Toolbar: bündig an Nav fixen + Overflow-Menü über die Toolbar heben
All checks were successful
CI / Build container images (pull_request) Successful in 1m9s
Details
CI / Auth e2e pack (pull_request) Successful in 6m45s
Details
CI / Import/export fidelity gate (pull_request) Successful in 54s
Details
CI / Lint, typecheck, test (pull_request) Successful in 4m25s
Details
CD / Build and push images (push) Successful in 16s
Details
CD / Deploy to Test (push) Successful in 13s
Details
CD / Smoke tests against Test (push) Successful in 1m15s
Details
CD / Promote to Int (push) Successful in 11s
Details
CI / Lint, typecheck, test (push) Successful in 4m33s
Details
CI / Build container images (push) Has been skipped
Details
CI / Auth e2e pack (push) Successful in 6m38s
Details
CI / Import/export fidelity gate (push) Successful in 1m10s
Details

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC
This commit is contained in:
Claude Fable 5 2026-07-19 11:08:40 +02:00
parent baea736616
commit 1b0fd21254
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/src/styles/base.css
View File

@ -72,6 +72,12 @@ button {
padding: 0 var(--space-4); padding: 0 var(--space-4);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
background: var(--color-bg); 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 { .topbar__brand {
@ -1076,10 +1082,13 @@ button {
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle); background: var(--color-bg-subtle);
/* Long articles: the toolbar pins to the top of the scrolling content /* Long articles: the toolbar pins to the top of the scrolling content area
area instead of scrolling away. */ 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; position: sticky;
top: 0; top: calc(-1 * var(--space-6));
z-index: 20; z-index: 20;
} }