wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): add safe-area-inset-top padding to prevent statusbar overlap on iOS PWA

Browse Source 
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
This commit is contained in:
weishu
2025-12-21 18:50:40 +08:00
parent 4f03f29ac3
commit a665386f05
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SessionHeader.tsx
+1 -1
View File
@@ -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
web/src/router.tsx
+3 -3
View File
@@ -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>
web/src/routes/sessions/file.tsx
+1 -1
View File
@@ -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"
web/src/routes/sessions/files.tsx
+1 -1
View File
@@ -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"