From 2e8ef0e5dbc7b731a4e2274010e20e2e61cedae8 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Wed, 21 Jan 2026 21:54:28 +0100
Subject: [PATCH] fix: add iOS PWA notch support with safe area insets (#190)

- Update viewport meta tag to include viewport-fit=cover
- Add apple-mobile-web-app-capable and status-bar-style meta tags
- Add CSS safe area insets to body element for proper notch handling
- Ensures content extends into safe areas on iOS devices while
  respecting notches and rounded corners

Co-authored-by: Claude <noreply@anthropic.com>
---
 index.html    | 10 +++++++++-
 src/index.css |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5b5cf95..48ff281 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,15 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="theme-color" content="#b366ff" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, viewport-fit=cover, width=device-width"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
diff --git a/src/index.css b/src/index.css
index 3b498e5..76a9407 100644
--- a/src/index.css
+++ b/src/index.css
@@ -166,6 +166,11 @@
   }
   body {
     @apply bg-background text-foreground font-mono;
+    /* iOS PWA safe area insets for notch support */
+    padding-top: env(safe-area-inset-top, 0);
+    padding-right: env(safe-area-inset-right, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
+    padding-left: env(safe-area-inset-left, 0);
   }
 }