zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: respect ios safe areas
All checks were successful
CI / Lint, typecheck and build (push) Successful in 9m54s
Details

Browse Source
This commit is contained in:
zv
2026-06-13 22:31:55 +02:00
parent 1ae1be68ec
commit f434126c96
3 changed files with 50 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/forecast/day-forecast-modal.tsx
View File

@@ -88,7 +88,7 @@ export function DayForecastModal({
<AnimatePresence>
{day ? (
<motion.div
className="modal-overlay z-[90] flex items-center justify-center p-0 sm:p-4 lg:p-8"
className="modal-overlay modal-safe-area z-[90] flex items-center justify-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -98,7 +98,7 @@ export function DayForecastModal({
role="dialog"
aria-modal="true"
aria-labelledby="day-forecast-title"
className="h-full w-full overflow-hidden bg-background shadow-card sm:max-w-6xl sm:rounded-panel sm:border sm:border-border/70"
className="h-full max-h-full w-full overflow-hidden bg-background shadow-card sm:max-w-6xl sm:rounded-panel sm:border sm:border-border/70"
initial={{ opacity: 0, y: 28, scale: 0.985 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 20, scale: 0.99 }}

6
components/layout/app-shell.tsx
View File

@@ -15,7 +15,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
const { t } = useI18n();
return (
<div className="min-h-screen overflow-x-hidden bg-background">
<header className="sticky top-0 z-40 border-b border-border/70 bg-surface">
<header className="app-header-safe sticky top-0 z-40 border-b border-border/70 bg-surface">
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
<Link href="/" className="text-2xl font-semibold tracking-[-0.09em] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
wtr<span className="text-accent">.</span>
@@ -35,8 +35,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
</div>
</div>
</header>
<main className="mx-auto max-w-7xl px-4 pb-28 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
<nav aria-label={t("nav.mobile")} className="fixed inset-x-3 bottom-3 z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden">
<main className="app-main-safe mx-auto max-w-7xl px-4 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
<nav aria-label={t("nav.mobile")} className="mobile-nav-safe fixed z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden">
{NAV_ITEMS.map((item, index) => {
const Icon = icons[index];
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);