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

@@ -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

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);
   }
 }