Problem
On mobile (viewport ≤ 720px), tapping the hamburger button in the top-right opens the navigation sheet, but the overlay does not actually cover the page. The hero section (STACK / AGENT / FEATURES / MEMORY / CONTROL / DEMO / VS / INSTALL) bleeds through the menu, and the menu items themselves are not visible.
Expected: an opaque, full-viewport sheet that fully obscures the page content behind it, with the nav links (STACK, FEATURES, CONTROL, DEMO, VS, INSTALL) clearly readable.
Reproducible at https://www.agent-memory.dev/ on any mobile-width viewport (or DevTools device emulation at ≤ 720px width).
Root cause
website/components/Nav.module.css applies backdrop-filter: blur(10px) to the <header> element. Per the CSS spec, backdrop-filter (with any value other than none) establishes a containing block for fixed-positioned descendants — same behavior as transform or filter.
The mobile sheet is rendered inside that <header>:
// website/components/Nav.tsx
<header className={styles.nav}>
...
<MobileNavToggle sections={SECTIONS} stars={stats.stars} />
</header>/* website/components/MobileNavToggle.module.css */
.sheet {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.94);
...
}Because the Nav is the fixed-position containing block (thanks to backdrop-filter), inset: 0 resolves to the Nav's own bounding box — the thin top header strip — rather than the viewport. The dark overlay therefore only covers the header area; the rest of the page (hero) stays fully visible, and the panel ends up rendered inside a strip too short to show its contents.
Proposed fix
Render the sheet via a React Portal to document.body so it escapes the Nav's containing block and is positioned against the viewport again. This is the minimal, dependency-free fix and avoids weakening the Nav's blur effect (which is intentional on desktop).
I'll send a PR.
Problem
On mobile (viewport ≤ 720px), tapping the hamburger button in the top-right opens the navigation sheet, but the overlay does not actually cover the page. The hero section (
STACK / AGENT / FEATURES / MEMORY / CONTROL / DEMO / VS / INSTALL) bleeds through the menu, and the menu items themselves are not visible.Expected: an opaque, full-viewport sheet that fully obscures the page content behind it, with the nav links (
STACK,FEATURES,CONTROL,DEMO,VS,INSTALL) clearly readable.Reproducible at https://www.agent-memory.dev/ on any mobile-width viewport (or DevTools device emulation at ≤ 720px width).
Root cause
website/components/Nav.module.cssappliesbackdrop-filter: blur(10px)to the<header>element. Per the CSS spec,backdrop-filter(with any value other thannone) establishes a containing block for fixed-positioned descendants — same behavior astransformorfilter.The mobile sheet is rendered inside that
<header>:Because the Nav is the fixed-position containing block (thanks to
backdrop-filter),inset: 0resolves to the Nav's own bounding box — the thin top header strip — rather than the viewport. The dark overlay therefore only covers the header area; the rest of the page (hero) stays fully visible, and the panel ends up rendered inside a strip too short to show its contents.Proposed fix
Render the sheet via a React Portal to
document.bodyso it escapes the Nav's containing block and is positioned against the viewport again. This is the minimal, dependency-free fix and avoids weakening the Nav's blur effect (which is intentional on desktop).I'll send a PR.