From 92af2e21b19e42bfe6818a512e497415852d0181 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 2 Jul 2026 14:07:19 -0400
Subject: [PATCH] feat: safe area insets for Dynamic Island / notch / cutout

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.
---
 web/src/components/Layout.tsx | 2 +-
 web/src/styles/index.css      | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
index 5a205bf..a8ab584 100644
--- a/web/src/components/Layout.tsx
+++ b/web/src/components/Layout.tsx
@@ -87,7 +87,7 @@ export function Layout() {
     return null;
   }
   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">
         {/* 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">
diff --git a/web/src/styles/index.css b/web/src/styles/index.css
index 507145b..a8141e6 100644
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -44,6 +44,8 @@
     line-height: 1.4;
   }
 
+  /* ponytail: safe-area env() can't go in @apply, handle in Layout.tsx inline styles */
+
   * {
     box-sizing: border-box;
   }