From 7b1d4c4849850ac4d99c9dec574a6b69626089f7 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 6 Jun 2025 18:14:56 +0800
Subject: [PATCH] Adjusted iOS-specific paddings

- Switched to CSS max() for proper conditional padding when dealing with screens that have a notch, dynamic island, gesture bar, etc.
- Top padding should now appear more compact in iOS
---
 src/App.vue                   | 12 ++++++------
 src/components/TopMessage.vue |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5bd5900b..4553d69a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed top-[calc(env(safe-area-inset-top)+1rem)] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"
@@ -541,13 +541,13 @@ export default class App extends Vue {
 
 <style>
 #Content {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: calc(env(safe-area-inset-top) + 1.5rem);
-  padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
+  padding-left: max(1.5rem, env(safe-area-inset-left));
+  padding-right: max(1.5rem, env(safe-area-inset-right));
+  padding-top: max(1.5rem, env(safe-area-inset-top));
+  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
 }
 
 #QuickNav ~ #Content {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
 }
 </style>
diff --git a/src/components/TopMessage.vue b/src/components/TopMessage.vue
index fa5c7e8f..93e99072 100644
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-5 top-[calc(env(safe-area-inset-top)+0.75rem)]">
+  <div class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top))]">
     <span class="align-center text-red-500 mr-2">{{ message }}</span>
     <span class="ml-2">
       <router-link