fix iphone padding

src/App.vue

@@ -51,24 +51,35 @@ const submitPassphrase = (close: () => void) => {
   if (passphraseValid.value) close()
 }
 
-const loading = computed(() => notes.value.length === 0 || passphraseRequired.value || !activeNotesSource.value)
+const loading = computed(
+  () => notes.value.length === 0 || passphraseRequired.value || !activeNotesSource.value
+)
 provide('loading', loading)
+
+const topBarHeight = 52
+const topBarHeightWithSafeArea = computed(() => `calc(${topBarHeight}px + var(--safe-area-top))`)
 </script>
 
 <template>
   <TopBar
     :side-bar-collapsed="sideBarCollapsed"
+    :height="topBarHeight"
+    :style="{ height: topBarHeightWithSafeArea }"
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
+    class="pe-[var(--safe-area-right)] ps-[var(--safe-area-left)]"
   />
   <!-- <div class="absolute bottom-0 left-0 right-0 top-[50px] mx-auto flex flex-grow"> -->
-  <div class="mx-auto flex w-full max-w-app flex-grow">
+  <div
+    class="mx-auto flex w-full max-w-app flex-grow pe-[var(--safe-area-right)] ps-[var(--safe-area-left)]"
+  >
     <Transition name="sidebar">
       <SideBar
         :view-modes="viewModes"
         :active-view-mode="activeViewMode"
         @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
         @collapse="(collapse) => (sideBarCollapsed = collapse)"
-        class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
+        class="bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
+        :style="{ 'margin-top': topBarHeightWithSafeArea }"
         v-if="!sideBarCollapsed"
       />
     </Transition>

src/components/TopBar.vue

@@ -5,9 +5,15 @@ import { initialized } from '@/composables/useFirebase'
 
 const loading = inject<boolean>('loading')
 
-const props = defineProps<{
-  sideBarCollapsed: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    sideBarCollapsed: boolean
+    height?: number
+  }>(),
+  {
+    height: 52
+  }
+)
 
 const emit = defineEmits<{
   toggleSideBar: []
@@ -24,8 +30,14 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
 }
 </script>
 <template>
-  <div class="z-[500] flex h-[50px] bg-primary" :class="searchActive && 'search-active'">
-    <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
+  <div
+    class="z-[500] flex items-end bg-primary"
+    :class="searchActive && 'search-active'"
+  >
+    <div
+      class="mx-auto flex w-full max-w-app items-center py-2.5 text-white"
+      :style="{ height: `${props.height}px` }"
+    >
       <div
         class="search-active-hide flex items-center pl-3"
         :class="sideBarCollapsed ? 'w-fit' : 'max-sm:w-fit md:w-sidebar md:pr-3'"

src/style.scss

@@ -87,3 +87,10 @@ p:last-child {
     @apply text-lg;
   }
 }
+
+:root {
+  --safe-area-top: env(safe-area-inset-top);
+  --safe-area-right: env(safe-area-inset-right);
+  --safe-area-bottom: env(safe-area-inset-bottom);
+  --safe-area-left: env(safe-area-inset-left);
+}