From dd0057baad314e7bc87bd5b5a5b223fb17ddb522 Mon Sep 17 00:00:00 2001
From: Forgotten <forgottenrunes@protonmail.com>
Date: Mon, 23 Feb 2026 17:17:31 -0600
Subject: [PATCH] fix(ui): add safe-area-inset-top for iPhone notch/dynamic
 island

Content was rendering behind the iPhone notch/dynamic island because
no top safe area inset was applied. Added pt-[env(safe-area-inset-top)]
to both the root Layout container and the mobile sidebar overlay.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/Layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 53da41aa..d36062d0 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -101,7 +101,7 @@ export function Layout() {
   );
 
   return (
-    <div className="flex h-screen bg-background text-foreground overflow-hidden">
+    <div className="flex h-screen bg-background text-foreground overflow-hidden pt-[env(safe-area-inset-top)]">
       {/* Mobile backdrop */}
       {isMobile && sidebarOpen && (
         <div
@@ -114,7 +114,7 @@ export function Layout() {
       {isMobile ? (
         <div
           className={cn(
-            "fixed inset-y-0 left-0 z-50 flex transition-transform duration-200 ease-in-out",
+            "fixed inset-y-0 left-0 z-50 flex pt-[env(safe-area-inset-top)] transition-transform duration-200 ease-in-out",
             sidebarOpen ? "translate-x-0" : "-translate-x-full"
           )}
         >