From c0b0ed66714625fd9b6b3d286d4be942b3793adc Mon Sep 17 00:00:00 2001
From: Angry Toenail <216561774+angrytoenail@users.noreply.github.com>
Date: Fri, 27 Jun 2025 08:52:30 +0100
Subject: [PATCH] Update HTML/CSS to accommodate mobile devices with notches

---
 ui/v2.5/index.html     | 2 +-
 ui/v2.5/src/index.scss | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/v2.5/index.html b/ui/v2.5/index.html
index 4134a27f0..e1ad856c0 100755
--- a/ui/v2.5/index.html
+++ b/ui/v2.5/index.html
@@ -7,7 +7,7 @@
     <link rel="apple-touch-icon" href="apple-touch-icon.png" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
+      content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
     />
     <meta name="theme-color" content="%COLOR%" />
     <link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index 9393397ed..cda4fc0ee 100755
--- a/ui/v2.5/src/index.scss
+++ b/ui/v2.5/src/index.scss
@@ -61,6 +61,8 @@ body {
 }
 
 .main {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   @include media-breakpoint-up(sm) {
     padding-top: 0.5rem;
   }