From 0cc08ff97f952d6c3623c2fb99f20a075c311789 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 31 Mar 2026 14:32:47 +0800
Subject: [PATCH] fix(stage-ui): model settings for live2d ui issue

---
 .../settings/model-settings/live2d.vue        | 26 ++++++++++++-------
 .../components/form/select-tab/select-tab.vue |  6 ++---
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue
index 34930e838..c1e0feae7 100644
--- a/packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue
+++ b/packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue
@@ -320,17 +320,23 @@ function handleMotionSelect(selectedMotionPath: string | number | undefined) {
       </template>
     </FieldCombobox>
 
-    <div :class="['mt-4', 'flex', 'items-center', 'justify-between']">
-      <div :class="['flex', 'flex-col', 'gap-1']">
-        <span :class="['text-sm', 'text-neutral-600', 'dark:text-neutral-400']">
-          {{ t('settings.live2d.fps.title') }}
-        </span>
-        <span :class="['text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
-          {{ t('settings.live2d.fps.description') }}
-        </span>
+    <label class="flex flex-col gap-4">
+      <div :class="['flex items-center gap-2', 'flex-row']">
+        <div class="flex-1">
+          <div class="flex items-center gap-1 text-sm font-medium">
+            <slot name="label">
+              {{ t('settings.live2d.fps.title') }}
+            </slot>
+          </div>
+          <div class="text-xs text-neutral-500 dark:text-neutral-400">
+            <slot name="description">
+              {{ t('settings.live2d.fps.description') }}
+            </slot>
+          </div>
+        </div>
+        <SelectTab v-model="live2dMaxFps" :options="fpsOptions" size="sm" :class="['shrink-0']" />
       </div>
-      <SelectTab v-model="live2dMaxFps" :options="fpsOptions" size="sm" :class="['w-48', 'shrink-0']" />
-    </div>
+    </label>
 
     <div mt-4 flex items-center justify-between>
       <span text-sm text-neutral-600 dark:text-neutral-400>Auto Blink</span>
diff --git a/packages/ui/src/components/form/select-tab/select-tab.vue b/packages/ui/src/components/form/select-tab/select-tab.vue
index e6a8e2bf5..3278c3dfd 100644
--- a/packages/ui/src/components/form/select-tab/select-tab.vue
+++ b/packages/ui/src/components/form/select-tab/select-tab.vue
@@ -28,8 +28,8 @@ const isDisabled = computed(() => props.disabled || props.readonly)
 
 const sizeClasses = computed(() =>
   props.size === 'sm'
-    ? ['py-2', 'px-3', 'text-xs', 'rounded-md']
-    : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md'],
+    ? ['py-2', 'px-3', 'text-xs', 'rounded-md', 'min-w-24']
+    : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md', 'min-w-32'],
 )
 
 const rootStyle = computed(() => ({
@@ -49,7 +49,7 @@ const rootStyle = computed(() => ({
     :class="[
       'select-tab',
       'is-interacting',
-      'relative', 'flex', 'w-full', 'items-stretch', 'rounded-lg',
+      'relative', 'flex', 'items-stretch', 'rounded-lg',
       'overflow-hidden',
       'bg-white-400/6', 'dark:bg-neutral-950/70',
       'transition-[border-color,box-shadow,opacity]', 'duration-200', 'ease-out',