From a665386f05601b1bec5208535dcc7b4bfd5603b8 Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Sun, 21 Dec 2025 18:39:50 +0800
Subject: [PATCH] fix(web): add safe-area-inset-top padding to prevent
 statusbar overlap on iOS PWA

This fixes an issue where viewport-fit=cover and black-translucent statusbar
configuration allowed content to extend under the iOS statusbar. Added env(safe-area-inset-top)
CSS handling to all main layout components:
- SessionHeader with pt-[env(safe-area-inset-top)]
- SessionsPage, MachinesPage, SpawnPage with safe-area padding
- FilesPage and FilePage headers with safe-area padding
---
 web/src/components/SessionHeader.tsx | 2 +-
 web/src/router.tsx                   | 6 +++---
 web/src/routes/sessions/file.tsx     | 2 +-
 web/src/routes/sessions/files.tsx    | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index 0b37879c..b0198b0d 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -49,7 +49,7 @@ export function SessionHeader(props: {
     }
 
     return (
-        <div className="bg-[var(--app-bg)]">
+        <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
             <div className="mx-auto w-full max-w-[720px] flex items-center gap-2 p-3">
                 {/* Back button */}
                 <button
diff --git a/web/src/router.tsx b/web/src/router.tsx
index c74e1e29..bfb3c027 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -34,7 +34,7 @@ function SessionsPage() {
     }, [refetch])
 
     return (
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <div className="flex-1 overflow-y-auto p-4 pt-[calc(1rem+env(safe-area-inset-top))] space-y-4">
             {error ? <div className="text-sm text-red-600">{error}</div> : null}
             <SessionList
                 sessions={sessions}
@@ -114,7 +114,7 @@ function MachinesPage() {
 
     return (
         <div className="flex-1 overflow-y-auto">
-            <div className="flex items-center gap-2 border-b border-[var(--app-border)] bg-[var(--app-bg)] p-3">
+            <div className="flex items-center gap-2 border-b border-[var(--app-border)] bg-[var(--app-bg)] p-3 pt-[calc(0.75rem+env(safe-area-inset-top))]">
                 <div className="flex-1 font-semibold">Machines</div>
             </div>
 
@@ -158,7 +158,7 @@ function SpawnPage() {
 
     return (
         <div className="flex-1 overflow-y-auto">
-            <div className="flex items-center gap-2 border-b border-[var(--app-border)] bg-[var(--app-bg)] p-3">
+            <div className="flex items-center gap-2 border-b border-[var(--app-border)] bg-[var(--app-bg)] p-3 pt-[calc(0.75rem+env(safe-area-inset-top))]">
                 <div className="flex-1 font-semibold">Create Session</div>
             </div>
 
diff --git a/web/src/routes/sessions/file.tsx b/web/src/routes/sessions/file.tsx
index 4abdd50a..3cdc308a 100644
--- a/web/src/routes/sessions/file.tsx
+++ b/web/src/routes/sessions/file.tsx
@@ -175,7 +175,7 @@ export default function FilePage() {
 
     return (
         <div className="flex h-full flex-col">
-            <div className="bg-[var(--app-bg)] border-b border-[var(--app-border)]">
+            <div className="bg-[var(--app-bg)] border-b border-[var(--app-border)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-[720px] flex items-center gap-2 p-3">
                     <button
                         type="button"
diff --git a/web/src/routes/sessions/files.tsx b/web/src/routes/sessions/files.tsx
index dc4d8b05..2a51a88a 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -249,7 +249,7 @@ export default function FilesPage() {
 
     return (
         <div className="flex h-full flex-col">
-            <div className="bg-[var(--app-bg)] border-b border-[var(--app-border)]">
+            <div className="bg-[var(--app-bg)] border-b border-[var(--app-border)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-[720px] flex items-center gap-2 p-3">
                     <button
                         type="button"