From d29156bb138fc9aec732f916b35922d13670896c Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 8 May 2025 20:11:45 +0800
Subject: [PATCH] Safe area implementation for iOS

Dynamic padding to clear certain iOS UI elements such as the notch, dynamic island and gesture bar, to ensure they don't overlap with our own UI elements.
---
 index.html                          |  2 +-
 src/App.vue                         | 27 +++++++++++++++++++--------
 src/components/QuickNav.vue         |  2 +-
 src/components/TopMessage.vue       |  2 +-
 src/views/ContactQRScanShowView.vue |  2 +-
 5 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index f5e74b12c0..ea64cda39e 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
     <link rel="icon" href="/favicon.ico">
     <title>TimeSafari</title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index e110363748..5bd5900b5c 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-4 right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      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"
     >
       <Notification
         v-slot="{ notifications, close }"
@@ -144,10 +144,10 @@
   <!--
     This "group" of "modal" is the prompt for an answer.
     Set "type" as follows: "confirm" for yes/no, and "notification" ones:
-     "-permission", "-mute", "-off"
+      "-permission", "-mute", "-off"
   -->
   <NotificationGroup group="modal">
-    <div class="fixed z-[100] top-0 inset-x-0 w-full">
+    <div class="fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full">
       <Notification
         v-slot="{ notifications, close }"
         enter="transform ease-out duration-300 transition"
@@ -167,10 +167,10 @@
           role="alert"
         >
           <!--
-           Type of "confirm" will post a message.
-           With onYes function, show a "Yes" button to call that function.
-           With onNo function, show a "No" button to call that function,
-             and pass it state of "askAgain" field shown if you set promptToStopAsking.
+            Type of "confirm" will post a message.
+            With onYes function, show a "Yes" button to call that function.
+            With onNo function, show a "No" button to call that function,
+              and pass it state of "askAgain" field shown if you set promptToStopAsking.
           -->
           <div
             v-if="notification.type === 'confirm'"
@@ -539,4 +539,15 @@ export default class App extends Vue {
 }
 </script>
 
-<style></style>
+<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);
+}
+
+#QuickNav ~ #Content {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
+}
+</style>
diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
index 86b1c9d65b..64a0bef301 100644
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]">
     <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
       <!-- Home Feed -->
       <li
diff --git a/src/components/TopMessage.vue b/src/components/TopMessage.vue
index 01f623d221..fa5c7e8f33 100644
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-5 top-3">
+  <div class="absolute right-5 top-[calc(env(safe-area-inset-top)+0.75rem)]">
     <span class="align-center text-red-500 mr-2">{{ message }}</span>
     <span class="ml-2">
       <router-link
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 18a4b07555..cb5733e6c1 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -78,7 +78,7 @@
       If you don't that first, these contacts won't see your activity.
     </div>
 
-    <div class="text-center my-6">
+    <div class="text-center mt-6">
       <div
         v-if="isScanning && !isNativePlatform"
         class="relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto"
