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.
2025-05-08 20:11:45 +08:00
parent 7b0d548cd8
commit d29156bb13
5 changed files with 23 additions and 12 deletions
--- 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