From d2bc179d5937172a01ebbfffd35e7617f0ac32af Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 6 Oct 2025 00:20:19 +0000
Subject: [PATCH] fix(frontend): Apply iOS safe area insets to body element
 instead of individual components.

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>
---
 frontend/src/components/AppSidebar.tsx | 2 +-
 frontend/src/components/SiteHeader.tsx | 2 +-
 frontend/src/index.css                 | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AppSidebar.tsx b/frontend/src/components/AppSidebar.tsx
index ededc0e..ef436c0 100644
--- a/frontend/src/components/AppSidebar.tsx
+++ b/frontend/src/components/AppSidebar.tsx
@@ -61,7 +61,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   };
 
   return (
-    <Sidebar collapsible="icon" className="pt-safe-top pl-safe-left" {...props}>
+    <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
diff --git a/frontend/src/components/SiteHeader.tsx b/frontend/src/components/SiteHeader.tsx
index 69be7d3..68b7e11 100644
--- a/frontend/src/components/SiteHeader.tsx
+++ b/frontend/src/components/SiteHeader.tsx
@@ -31,7 +31,7 @@ export function SiteHeader() {
   });
 
   return (
-    <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear pt-safe-top">
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <SidebarTrigger className="-ml-1" />
         <Separator
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b493169..da2ca5d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -86,5 +86,9 @@
   }
   body {
     @apply bg-background text-foreground;
+    padding-top: var(--safe-area-inset-top);
+    padding-bottom: var(--safe-area-inset-bottom);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
   }
 }