standard header/menu KA 2026-08-22 : header opaque + z-index tokens + ka-scroll-lock
3 changed files +9 −13
modified
frontend/src/components/BottomNav.tsx
+2 −2
@@ -21,14 +21,14 @@ export default function BottomNav() { | ||
| 21 | 21 | // Autofocus + scroll lock while the overlay is open. |
| 22 | 22 | useEffect(() => { |
| 23 | 23 | if (!searchOpen) return |
| 24 | − document.body.style.overflow = 'hidden' | |
| 24 | + document.documentElement.classList.add('ka-scroll-lock') | |
| 25 | 25 | const t = window.setTimeout(() => inputRef.current?.focus(), 60) |
| 26 | 26 | const onKey = (e: KeyboardEvent) => { |
| 27 | 27 | if (e.key === 'Escape') setSearchOpen(false) |
| 28 | 28 | } |
| 29 | 29 | window.addEventListener('keydown', onKey) |
| 30 | 30 | return () => { |
| 31 | − document.body.style.overflow = '' | |
| 31 | + document.documentElement.classList.remove('ka-scroll-lock') | |
| 32 | 32 | window.clearTimeout(t) |
| 33 | 33 | window.removeEventListener('keydown', onKey) |
| 34 | 34 | } |
modified
frontend/src/components/FilterSheet.tsx
+2 −2
@@ -30,13 +30,13 @@ export default function FilterSheet({ | ||
| 30 | 30 | // Scroll lock + Escape to close while open. |
| 31 | 31 | useEffect(() => { |
| 32 | 32 | if (!open) return |
| 33 | − document.body.style.overflow = 'hidden' | |
| 33 | + document.documentElement.classList.add('ka-scroll-lock') | |
| 34 | 34 | const onKey = (e: KeyboardEvent) => { |
| 35 | 35 | if (e.key === 'Escape') onClose() |
| 36 | 36 | } |
| 37 | 37 | window.addEventListener('keydown', onKey) |
| 38 | 38 | return () => { |
| 39 | − document.body.style.overflow = '' | |
| 39 | + document.documentElement.classList.remove('ka-scroll-lock') | |
| 40 | 40 | window.removeEventListener('keydown', onKey) |
| 41 | 41 | } |
| 42 | 42 | }, [open, onClose]) |
modified
frontend/src/styles.css
+5 −9
@@ -172,10 +172,8 @@ button:focus-visible, | ||
| 172 | 172 | .site-header { |
| 173 | 173 | position: sticky; |
| 174 | 174 | top: 0; |
| 175 | − z-index: 60; | |
| 176 | − background: rgba(245, 243, 238, 0.94); | |
| 177 | − backdrop-filter: blur(12px); | |
| 178 | − -webkit-backdrop-filter: blur(12px); | |
| 175 | + z-index: var(--z-header, 500); | |
| 176 | + background: var(--paper); | |
| 179 | 177 | border-bottom: 1px solid var(--border); |
| 180 | 178 | } |
| 181 | 179 | |
@@ -362,12 +360,10 @@ button:focus-visible, | ||
| 362 | 360 | left: 0; |
| 363 | 361 | right: 0; |
| 364 | 362 | bottom: 0; |
| 365 | − z-index: 70; | |
| 363 | + z-index: var(--z-bottombar, 600); | |
| 366 | 364 | display: grid; |
| 367 | 365 | grid-template-columns: repeat(4, 1fr); |
| 368 | − background: rgba(245, 243, 238, 0.96); | |
| 369 | − backdrop-filter: blur(14px); | |
| 370 | − -webkit-backdrop-filter: blur(14px); | |
| 366 | + background: var(--paper); | |
| 371 | 367 | border-top: 1px solid var(--border); |
| 372 | 368 | padding-bottom: var(--safe-b); |
| 373 | 369 | height: calc(var(--tabbar-h) + var(--safe-b)); |
@@ -422,7 +418,7 @@ button:focus-visible, | ||
| 422 | 418 | .search-overlay { |
| 423 | 419 | position: fixed; |
| 424 | 420 | inset: 0; |
| 425 | − z-index: 80; | |
| 421 | + z-index: var(--z-modal, 900); | |
| 426 | 422 | background: var(--bg); |
| 427 | 423 | padding: max(0.9rem, env(safe-area-inset-top)) 1rem 1rem; |
| 428 | 424 | animation: overlay-in 0.18s ease; |
| 429 | 425 | |