From e9a82388b68b0e52258f0ce4d832b65ce2310eb7 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 18 Jul 2025 01:55:00 +0800
Subject: [PATCH] fix(stage-web,stage-tamagotchi): width incorrect for model
 settings

---
 .../src/pages/settings/models/index.vue       |  2 +-
 .../src/pages/settings/models/index.vue       |  2 +-
 .../Settings/ModelSettings/Live2DScene.vue    | 15 +++++++-------
 .../Settings/ModelSettings/index.vue          | 20 ++++++++++++++++---
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/stage-tamagotchi/src/pages/settings/models/index.vue b/apps/stage-tamagotchi/src/pages/settings/models/index.vue
index 55406c311..fc6e806aa 100644
--- a/apps/stage-tamagotchi/src/pages/settings/models/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/models/index.vue
@@ -44,7 +44,7 @@ const {
 
 <template>
   <div flex class="relative h-[calc(100dvh-8rem)] flex-col-reverse md:flex-row">
-    <ModelSettings w="100% md:30%" h-fit overflow-y-scroll class="absolute bottom-0 right-0 top-0" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
+    <ModelSettings live-2d-settings-class="w-100% md:w-40% lg:w-30% xl:w-30% 2xl:w-30% h-fit overflow-y-scroll absolute bottom-0 right-0 top-0" :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 55406c311..fc6e806aa 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -44,7 +44,7 @@ const {
 
 <template>
   <div flex class="relative h-[calc(100dvh-8rem)] flex-col-reverse md:flex-row">
-    <ModelSettings w="100% md:30%" h-fit overflow-y-scroll class="absolute bottom-0 right-0 top-0" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
+    <ModelSettings live-2d-settings-class="w-100% md:w-40% lg:w-30% xl:w-30% 2xl:w-30% h-fit overflow-y-scroll absolute bottom-0 right-0 top-0" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
   </div>
 
   <IconAnimation
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue
index 8eec6d3f3..e430b3e62 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
+import { Screen } from '@proj-airi/stage-ui/components'
 import { useLive2d } from '@proj-airi/stage-ui/stores'
-import { useElementBounding, useMouse } from '@vueuse/core'
+import { useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 
 import { Live2DCanvas, Live2DModel } from '../../../Scenes'
 
-const live2dContainerRef = ref<HTMLDivElement>()
 const live2dCanvasRef = ref<InstanceType<typeof Live2DCanvas>>()
-const { width, height } = useElementBounding(live2dContainerRef)
 const { positionInPercentageString, scale } = storeToRefs(useLive2d())
 
 const positionCursor = useMouse()
 </script>
 
 <template>
-  <div ref="live2dContainerRef" w="100%" h="100%">
+  <Screen v-slot="{ width, height }" relative min-h-70dvh>
     <Live2DCanvas
-      v-slot="{ app }"
       ref="live2dCanvasRef"
+      v-slot="{ app }"
       :width="width"
       :height="height"
-      :resolution="2"
-      max-h="100dvh"
+      :resolution="3"
+      rounded-full
     >
       <Live2DModel
         :app="app"
@@ -39,5 +38,5 @@ const positionCursor = useMouse()
         :scale="scale"
       />
     </Live2DCanvas>
-  </div>
+  </Screen>
 </template>
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue
index 075d06495..03aa8b684 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue
@@ -6,8 +6,10 @@ import Live2DScene from './Live2DScene.vue'
 
 import { useSettings } from '../../../../stores/settings'
 
-defineProps<{
+const props = defineProps<{
   palette: string[]
+  live2dSceneClass?: string | string[]
+  live2dSettingsClass?: string | string[]
 }>()
 
 defineEmits<{
@@ -20,8 +22,20 @@ const { stageView } = storeToRefs(useSettings())
 <template>
   <!-- Live2D component for 2D stage view -->
   <template v-if="stageView === '2d'">
-    <Live2DScene />
-    <div flex="~ col gap-2">
+    <Live2DScene
+      :class="[
+        ...(props.live2dSceneClass
+          ? (typeof props.live2dSceneClass === 'string' ? [props.live2dSceneClass] : props.live2dSceneClass)
+          : []),
+      ]"
+    />
+    <div
+      flex="~ col gap-2" :class="[
+        ...(props.live2dSettingsClass
+          ? (typeof props.live2dSettingsClass === 'string' ? [props.live2dSettingsClass] : props.live2dSettingsClass)
+          : []),
+      ]"
+    >
       <Live2D :palette="palette" @extract-colors-from-model="$emit('extractColorsFromModel')" />
     </div>
   </template>