From 6589c2dd666f8605cf6d1bf9ad7277734d4cd302 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 18 Sep 2025 22:26:03 +0000
Subject: [PATCH] fix(frontend): Add iOS safe area support for PWA sticky
 header

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>
---
 frontend/src/components/Header.tsx | 2 +-
 frontend/src/index.css             | 6 ++++++
 frontend/tailwind.config.js        | 6 ++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index edcb9c2..8cb4ef0 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -33,7 +33,7 @@ export default function Header({ setSidebarOpen }: HeaderProps) {
   });
 
   return (
-    <header className="lg:static sticky top-0 z-50 bg-card shadow-sm border-b border-border">
+    <header className="lg:static sticky top-0 z-50 bg-card shadow-sm border-b border-border pt-safe-top">
       <div className="flex items-center justify-between h-16 px-6">
         <div className="flex items-center">
           <button
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b524fa2..070146d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -29,6 +29,12 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    
+    /* iOS Safe Area Support for PWA */
+    --safe-area-inset-top: env(safe-area-inset-top, 0px);
+    --safe-area-inset-right: env(safe-area-inset-right, 0px);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-inset-left: env(safe-area-inset-left, 0px);
   }
   .dark {
     --background: 222.2 84% 4.9%;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f0c43d0..4296e33 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,6 +9,12 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      spacing: {
+        'safe-top': 'var(--safe-area-inset-top)',
+        'safe-bottom': 'var(--safe-area-inset-bottom)',
+        'safe-left': 'var(--safe-area-inset-left)',
+        'safe-right': 'var(--safe-area-inset-right)',
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",