feat(stage-pocket): respect safe area in the main stage

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,

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'],
     ],
   },
 ])