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

@@ -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-left: max(1.5rem, env(safe-area-inset-left));
-  padding-right: 1.5rem;
+  padding-right: max(1.5rem, env(safe-area-inset-right));
-  padding-top: calc(env(safe-area-inset-top) + 1.5rem);
+  padding-top: max(1.5rem, env(safe-area-inset-top));
-  padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
+  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>

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