trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix iOS safe area: header respects notch, chart respects home indicator

Browse source 
- viewport-fit=cover enables safe area insets in Safari
- Header: pt-[max(0.5rem,env(safe-area-inset-top))] clears the notch
- Elevation chart: pb-[max(0.5rem,env(safe-area-inset-bottom))] clears
  the home indicator bar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-12 19:34:25 +02:00
parent 66885c82f2
commit ca48284252
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
3 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/planner/app/components/ElevationChart.tsx
View file

@ -878,7 +878,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
if (points.length < 2) return null;
return (
<div className="border-t border-gray-200 px-2 py-2">
<div className="border-t border-gray-200 px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
<div className="mb-1 flex items-center gap-2 px-2">
{(() => {
const osmLinks: Record<string, string> = {

2
apps/planner/app/components/SessionView.tsx
View file

@ -223,7 +223,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
return (
<>
<header className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-4 py-2">
<header className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 pt-[max(0.5rem,env(safe-area-inset-top))]">
<div className="flex items-center gap-2 md:gap-4">
<Link to="/" className="hidden text-lg font-semibold text-gray-900 hover:text-blue-600 sm:block">
{t("title")}

2
apps/planner/app/root.tsx
View file

@ -13,7 +13,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<html lang={i18n.language}>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />