feat(frontend): safe-area insets + hardened reduced-motion

- Add viewport export with viewportFit: "cover" so iOS exposes
  env(safe-area-inset-*) (required for the insets to take effect).
- NavRail / TopBar / main / Toaster now respect safe-area insets so content
  clears the iPhone notch and home indicator in both portrait and landscape.
- prefers-reduced-motion: the media query already disabled declared animation
  classes; harden it with a global transition/animation duration override and
  kill the scan-line shimmer so motion-sensitive users get a fully static UI.

Verified tsc --noEmit + next build clean.
This commit is contained in:
asepharyana committed 2026-08-16 16:55:34 +07:00
1 parent c89288191e
commit 0ace758c79
6 files changed
+24 -5

No files matched your search

@@ -32,7 +32,7 @@ export function TopBar() {
: "text-signal";
return (
<header className="sticky top-0 z-40 flex items-center gap-3 px-4 py-3 sm:gap-4 sm:px-5 sm:py-3.5">
<header className="sticky top-0 z-40 flex items-center gap-3 px-4 py-3 pt-[calc(0.75rem+env(safe-area-inset-top))] sm:gap-4 sm:px-5 sm:py-3.5">
<div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
<span className="eyebrow hidden sm:inline">GMW</span>
<h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">{label}</h1>