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