fix(stage-tamagotchi,stage-web): overflow for stage, support vertical for model settings

apps/stage-tamagotchi/src/components/Settings/Live2DModelControlButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useSettings } from '@proj-airi/stage-ui/stores'
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const settings = useSettings()
+</script>
+
+<template>
+  <button
+    :disabled="settings.loadingLive2dModel"
+    bg="neutral-100 dark:neutral-800"
+    hover="bg-neutral-200 dark:bg-neutral-700"
+    transition="all ease-in-out duration-250"
+    rounded
+    @click="$emit('click')"
+  >
+    <slot />
+  </button>
+</template>

apps/stage-tamagotchi/src/pages/settings/models/index.vue

@@ -46,18 +46,30 @@ const positionCursor = useMouse()
 </script>
 
 <template>
-  <div flex>
-    <div ref="live2dContainerRef" w="50%" h="80vh">
-      <Live2DCanvas v-slot="{ app }" ref="live2dCanvasRef" :width="width" :height="height">
+  <div flex class="flex-col-reverse sm:flex-row">
+    <div ref="live2dContainerRef" w="100% sm:50%" h="50dvh sm:80dvh">
+      <Live2DCanvas
+        v-slot="{ app }"
+        ref="live2dCanvasRef"
+        :width="width"
+        :height="height"
+        :resolution="2"
+        max-h="100dvh"
+      >
         <Live2DModel
-          :app="app" :mouth-open-size="0" :width="width" :height="height" :paused="false" :focus-at="{
+          :app="app"
+          :mouth-open-size="0"
+          :width="width"
+          :height="height"
+          :paused="false"
+          :focus-at="{
             x: positionCursor.x.value,
             y: positionCursor.y.value,
           }"
         />
       </Live2DCanvas>
     </div>
-    <Live2DSettings w="50%" h="80vh" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
+    <Live2DSettings w="100% sm:50%" h="50dvh sm:80dvh" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
   </div>
 
   <IconAnimation

apps/stage-web/src/pages/settings/models/index.vue

@@ -46,18 +46,30 @@ const positionCursor = useMouse()
 </script>
 
 <template>
-  <div flex>
-    <div ref="live2dContainerRef" w="50%" h="80vh">
-      <Live2DCanvas v-slot="{ app }" ref="live2dCanvasRef" :width="width" :height="height">
+  <div flex class="flex-col-reverse sm:flex-row">
+    <div ref="live2dContainerRef" w="100% sm:50%" h="50dvh sm:80dvh">
+      <Live2DCanvas
+        v-slot="{ app }"
+        ref="live2dCanvasRef"
+        :width="width"
+        :height="height"
+        :resolution="2"
+        max-h="100dvh"
+      >
         <Live2DModel
-          :app="app" :mouth-open-size="0" :width="width" :height="height" :paused="false" :focus-at="{
+          :app="app"
+          :mouth-open-size="0"
+          :width="width"
+          :height="height"
+          :paused="false"
+          :focus-at="{
             x: positionCursor.x.value,
             y: positionCursor.y.value,
           }"
         />
       </Live2DCanvas>
     </div>
-    <Live2DSettings w="50%" h="80vh" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
+    <Live2DSettings w="100% sm:50%" h="50dvh sm:80dvh" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
   </div>
 
   <IconAnimation

packages/stage-ui/src/components/Section/Section.vue

@@ -31,7 +31,7 @@ withDefaults(defineProps<{
         />
       </button>
     </template>
-    <div grid gap-4 p-4 :class="innerClass">
+    <div grid gap-2 p-4 :class="innerClass">
       <slot />
     </div>
   </Collapsable>