LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Wiki Activity

feat: safe area insets for Dynamic Island / notch / cutout

Browse Source 
viewport-fit=cover already set. Added env(safe-area-inset-*) padding
to outer container so content doesn't hide behind Dynamic Island,
notches, or the home indicator bar.
This commit is contained in:
Dustin Newkirk
2026-07-02 14:07:19 -04:00
parent 1e22daead3
commit 92af2e21b1
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/Layout.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export function Layout() {
return null; return null;
} }
return ( return (
<div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col p-1 md:p-2"> <div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col" style={{ padding: 'max(env(safe-area-inset-top), 0.5rem) max(env(safe-area-inset-right), 0.5rem) max(env(safe-area-inset-bottom), 0.5rem) max(env(safe-area-inset-left), 0.5rem)' }}>
<div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0"> <div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0">
{/* Top bar */} {/* Top bar */}
<div className="flex items-center justify-between px-2 md:px-3 py-1 border-b border-gb-bg-t bg-gb-bg-s gap-2"> <div className="flex items-center justify-between px-2 md:px-3 py-1 border-b border-gb-bg-t bg-gb-bg-s gap-2">
web/src/styles/index.css
+2
View File
@@ -44,6 +44,8 @@
line-height: 1.4; line-height: 1.4;
} }
/* ponytail: safe-area env() can't go in @apply, handle in Layout.tsx inline styles */
* { * {
box-sizing: border-box; box-sizing: border-box;
} }