From 3ed50444257c5f22b167e76e3c5bf19caaae9380 Mon Sep 17 00:00:00 2001
From: Kobe Albright <kobe.albright@gmail.com>
Date: Thu, 5 Nov 2026 21:52:00 -0600
Subject: [PATCH] Keep the settings menu inside the iOS safe areas

On iPhone the full-screen settings menu drew its title bar and close button
under the status bar clock. At the phone breakpoint the menu now pads its
contents by the safe-area insets while its background still fills the
screen, and the close button moves down with them. On larger screens the
centred menu's maximum size leaves the insets clear. The insets are zero in
browsers and on desktop, so only iOS changes.
---
 .../MainMenu/MainMenuComponent.razor.css      | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/Valour/Client/Components/Menus/Modals/MainMenu/MainMenuComponent.razor.css b/Valour/Client/Components/Menus/Modals/MainMenu/MainMenuComponent.razor.css
index 815b65c56..1c7228184 100644
--- a/Valour/Client/Components/Menus/Modals/MainMenu/MainMenuComponent.razor.css
+++ b/Valour/Client/Components/Menus/Modals/MainMenu/MainMenuComponent.razor.css
@@ -1,12 +1,12 @@
-.v-menu-container {
+.v-menu-container {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 1120px;
-    max-width: 100vw;
+    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
     height: 780px;
-    max-height: 100vh;
-    max-height: 100dvh;
+    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     overflow: hidden;
     color: var(--text-primary);
     background-color: var(--surface-base);
@@ -54,8 +54,8 @@
     flex-shrink: 0;
     width: 260px;
     height: 100%;
-    max-height: 100vh;
-    max-height: 100dvh;
+    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     background-color: var(--surface-canvas);
     border-right: 1px solid var(--line);
 }
@@ -214,8 +214,8 @@
     flex-direction: column;
     flex: 1;
     height: 100%;
-    max-height: 100vh;
-    max-height: 100dvh;
+    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     padding: 28px 32px;
     overflow-y: auto;
     background-color: var(--surface-base);
@@ -308,10 +308,17 @@
         min-width: 100vw;
         min-height: 100vh;
         min-height: 100dvh;
+        box-sizing: border-box;
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
         border: none;
         border-radius: 0;
     }
 
+    .v-menu-close {
+        top: calc(14px + env(safe-area-inset-top));
+        right: calc(14px + env(safe-area-inset-right));
+    }
+
     .v-menu-layout {
         flex-direction: column;
     }