From 779787576f60f0d7645764864388ab3dc4ba1a58 Mon Sep 17 00:00:00 2001
From: Sonja Askim <sonja.askim@gmail.com>
Date: Thu, 14 May 2026 12:39:49 +0200
Subject: [PATCH] fix: respect iOS safe area inset on bottom navigation

Adds viewport-fit=cover and env(safe-area-inset-bottom) padding so the
mobile bottom nav clears the iPhone home indicator instead of being
obscured by it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json               | 2 +-
 src/app/app.component.scss | 3 ++-
 src/index.html             | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 2c1a370..70a6945 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "random-teams",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "packageManager": "pnpm@11.1.1",
   "engines": {
     "node": ">=22.13.0"
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 954e643..ba23a9e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -245,7 +245,7 @@
   flex: 1;
   overflow-y: auto;
   padding: 1rem;
-  padding-bottom: 5rem;
+  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
 
   @media (min-width: 768px) {
     padding-bottom: 1.5rem;
@@ -269,6 +269,7 @@
   background: var(--surface);
   border-top: 1px solid var(--border);
   z-index: 50;
+  padding-bottom: env(safe-area-inset-bottom);
 
   @media (min-width: 768px) {
     display: none;
diff --git a/src/index.html b/src/index.html
index 2ad6d06..c83d432 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>RandomTeams</title>
     <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <script>
       if (
         localStorage.getItem('theme') === 'dark' ||