diff --git a/src/App.vue b/src/App.vue
index f940768..ef8b004 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -91,21 +91,23 @@ const topBarHeightWithSafeArea = computed(() => `calc(${topBarHeight}px + var(--
       />
     </Transition>
     <main
-      class="transition[margin-left] z-10 mx-auto flex h-full w-full max-w-app flex-col overflow-y-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
+      class="transition[margin-left] z-10 mx-auto flex h-full w-full max-w-app flex-col overflow-y-auto border-x-[1px] bg-white duration-200 ease-out pb-[var(--safe-area-bottom)]"
       :class="sideBarCollapsed ? 'ml-0' : 'sm:ml-sidebar'"
     >
-      <template v-if="!loading">
-        <Note
-          v-if="activeViewMode.name === 'Note' && activeNote"
-          :key="activeNote.id"
-          :note="activeNote"
-          class=""
-          @update="(note) => updateNote(note.id, note)"
-        />
-        <ListView v-else-if="activeViewMode.name === 'List'" />
-        <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
-      </template>
-      <SkeletonNote v-else />
+      <div class="flex h-full px-10 py-6 max-sm:px-4 max-sm:py-3">
+        <template v-if="!loading">
+          <Note
+            v-if="activeViewMode.name === 'Note' && activeNote"
+            :key="activeNote.id"
+            :note="activeNote"
+            class=""
+            @update="(note) => updateNote(note.id, note)"
+          />
+          <ListView v-else-if="activeViewMode.name === 'List'" />
+          <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
+        </template>
+        <SkeletonNote v-else />
+      </div>
     </main>
   </div>
   <UIModal :open="passphraseRequired" :persistent="true">