style: screensafearea

moeru-ai · Dec 3, 2024 · 135a8a0 · 135a8a0
1 parent 6f57d5f
commit 135a8a0
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/stage/src/layouts/default.vue b/packages/stage/src/layouts/default.vue
@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { useScreenSafeArea } from '@vueuse/core'
+
+const { top, right, bottom, left } = useScreenSafeArea()
+</script>
+
 <template>
-  <main text="gray-700 dark:gray-200" h-full font-sans>
+  <main
+    text="gray-700 dark:gray-200" h-full font-sans
+    :style="{
+      paddingTop: `${top.value}px`,
+      paddingRight: `${right.value}px`,
+      paddingBottom: `${bottom.value}px`,
+      paddingLeft: `${left.value}px`,
+    }"
+  >
     <RouterView />
   </main>
 </template>