From 927d85e5b05646b9d6255f9f44d71bc1a7b8e8a7 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 13 Jun 2025 17:02:19 +0800
Subject: [PATCH] fix(stage-tamagotchi,stage-web): overflow for stage, support
 vertical for model settings

---
 .../Settings/Live2DModelControlButton.vue     | 22 +++++++++++++++++++
 .../src/pages/settings/models/index.vue       | 22 ++++++++++++++-----
 .../src/pages/settings/models/index.vue       | 22 ++++++++++++++-----
 .../src/components/Section/Section.vue        |  2 +-
 4 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/components/Settings/Live2DModelControlButton.vue

diff --git a/apps/stage-tamagotchi/src/components/Settings/Live2DModelControlButton.vue b/apps/stage-tamagotchi/src/components/Settings/Live2DModelControlButton.vue
new file mode 100644
index 000000000..5a988d3f7
--- /dev/null
+++ b/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>
diff --git a/apps/stage-tamagotchi/src/pages/settings/models/index.vue b/apps/stage-tamagotchi/src/pages/settings/models/index.vue
index 6239b331a..41015d54e 100644
--- a/apps/stage-tamagotchi/src/pages/settings/models/index.vue
+++ b/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
diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index 6239b331a..41015d54e 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/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
diff --git a/packages/stage-ui/src/components/Section/Section.vue b/packages/stage-ui/src/components/Section/Section.vue
index 828ec0643..3899d9821 100644
--- a/packages/stage-ui/src/components/Section/Section.vue
+++ b/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>