From 07f7bb58dc799a4ede5a295eb3cc8f925f46dad0 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Thu, 5 Mar 2026 02:24:40 +0700
Subject: [PATCH] feat(stage-pocket): respect safe area in the main stage

---
 apps/stage-pocket/src/pages/index.vue |  7 ++++---
 apps/stage-pocket/uno.config.ts       | 15 +++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/stage-pocket/src/pages/index.vue b/apps/stage-pocket/src/pages/index.vue
index ce302e0dd..f7f35e97e 100644
--- a/apps/stage-pocket/src/pages/index.vue
+++ b/apps/stage-pocket/src/pages/index.vue
@@ -180,16 +180,17 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
     :background="selectedOption"
     :top-color="sampledColor"
   >
-    <div relative flex="~ col" z-2 h-100dvh w-100vw of-hidden>
+    <div flex="~ col" relative z-2 h-100dvh w-100vw of-hidden py-safe>
       <!-- header -->
       <div class="px-0 py-1 md:px-3 md:py-3" w-full gap-2>
         <Header class="hidden md:flex" />
         <MobileHeader class="flex md:hidden" />
       </div>
       <!-- page -->
-      <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">
+      <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col" min-h-0>
         <WidgetStage
-          flex-1 min-w="1/2"
+          min-w="1/2"
+          min-h-0 flex-1
           :paused="paused"
           :focus-at="{
             x: positionCursor.x.value,
diff --git a/apps/stage-pocket/uno.config.ts b/apps/stage-pocket/uno.config.ts
index 693fbd0ef..99045aec0 100644
--- a/apps/stage-pocket/uno.config.ts
+++ b/apps/stage-pocket/uno.config.ts
@@ -21,6 +21,21 @@ export default mergeConfigs([
         'transition-property': 'color, background-color, border-color, text-color',
         'transition-duration': '0s',
       }],
+
+      ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
+      ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
+      ['pl-safe', { 'padding-left': 'env(safe-area-inset-left)' }],
+      ['pr-safe', { 'padding-right': 'env(safe-area-inset-right)' }],
+      ['p-safe', {
+        'padding-top': 'env(safe-area-inset-top)',
+        'padding-bottom': 'env(safe-area-inset-bottom)',
+        'padding-left': 'env(safe-area-inset-left)',
+        'padding-right': 'env(safe-area-inset-right)',
+      }],
+    ],
+    shortcuts: [
+      ['px-safe', 'pl-safe pr-safe'],
+      ['py-safe', 'pt-safe pb-safe'],
     ],
   },
 ])