From 3a97d8d18415bda96531d40a70754d9366657d1b Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 4 Jan 2026 04:23:14 +0800
Subject: [PATCH] fix(stage-ui): model selector in mobile overlaps

---
 .../model-selector/model-selector-dialog.vue  |  2 +-
 .../dialogs/model-selector/model-selector.vue | 43 +++++++++++++------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue
index b082dd844..546e92f04 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue
@@ -39,7 +39,7 @@ onMounted(() => screenSafeArea.update())
     </DrawerTrigger>
     <DrawerPortal>
       <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
+      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[80%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md sm:max-h-[75%] dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
         <DrawerHandle />
         <ModelManager v-model="selectedModel" @close="showDialog = false" />
       </DrawerContent>
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
index 407c9bd3b..9d55f82f7 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
@@ -93,14 +93,24 @@ vrmDialog.onChange(handleAddVRMModel)
               :side-offset="8"
             >
               <DropdownMenuItem
-                class="data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-primary-100/20 sm:text-sm data-[highlighted]:text-primary-200"
+                :class="[
+                  'data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 leading-none outline-none data-[disabled]:pointer-events-none',
+                  'text-base sm:text-sm',
+                  'data-[highlighted]:bg-primary-300/20 dark:data-[highlighted]:bg-primary-100/20',
+                  'data-[highlighted]:text-primary-400 dark:data-[highlighted]:text-primary-200',
+                ]"
                 transition="colors duration-200 ease-in-out"
                 @click="live2dDialog.open()"
               >
                 Live2D
               </DropdownMenuItem>
               <DropdownMenuItem
-                class="data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-primary-100/20 sm:text-sm data-[highlighted]:text-primary-200"
+                :class="[
+                  'data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 leading-none outline-none data-[disabled]:pointer-events-none',
+                  'text-base sm:text-sm',
+                  'data-[highlighted]:bg-primary-300/20 dark:data-[highlighted]:bg-primary-100/20',
+                  'data-[highlighted]:text-primary-400 dark:data-[highlighted]:text-primary-200',
+                ]"
                 transition="colors duration-200 ease-in-out" @click="vrmDialog.open()"
               >
                 VRM
@@ -113,19 +123,22 @@ vrmDialog.onChange(handleAddVRMModel)
     <div v-if="displayModelsFromIndexedDBLoading">
       Loading display models...
     </div>
-    <div class="flex-1 md:flex-none" h-full w-full overflow-x-hidden overflow-y-scroll>
-      <div class="grid grid-cols-2 gap-2 lg:max-h-80dvh">
+    <div class="flex-1 overflow-x-auto overflow-y-hidden md:flex-none sm:overflow-x-hidden sm:overflow-y-scroll" h-full w-full>
+      <div class="w-full flex gap-2 md:grid lg:grid-cols-2 md:grid-cols-1 lg:max-h-80dvh">
         <div
           v-for="(model) of displayModels"
           :key="model.id"
           v-auto-animate
-          relative w-full flex="~ col md:row" gap-2
+          relative gap-2
+          class="block h-full w-full md:flex md:flex-row"
           @click="() => highlightDisplayModelCard = model.id"
         >
           <div absolute left-3 top-4 z-1>
             <DropdownMenuRoot>
               <DropdownMenuTrigger
-                bg="neutral-900/20 hover:neutral-900/45 active:neutral-900/60 dark:neutral-950/50 hover:dark:neutral-900/65 active:dark:neutral-900/90"
+                :class="[
+                  'bg-neutral-900/20 hover:bg-neutral-900/45 active:bg-neutral-900/60 dark:bg-neutral-950/50 hover:dark:bg-neutral-900/65 active:dark:bg-neutral-900/90',
+                ]"
                 text="white"
                 h-7 w-7 flex items-center justify-center rounded-lg backdrop-blur-sm
                 transition="colors duration-200 ease-in-out"
@@ -135,16 +148,22 @@ vrmDialog.onChange(handleAddVRMModel)
               </DropdownMenuTrigger>
               <DropdownMenuPortal>
                 <DropdownMenuContent
-                  class="will-change-[opacity,transform] z-10000 max-w-45 rounded-lg p-0.5 text-white shadow-md outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:text-black"
-                  bg="neutral-700/50 dark:neutral-950/50"
+                  :class="[
+                    'will-change-[opacity,transform] z-10000 max-w-45 rounded-lg p-0.5 text-white shadow-md outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:text-black',
+                    'bg-neutral-900/30 dark:bg-neutral-950/50',
+                    'backdrop-blur-sm',
+                  ]"
                   transition="colors duration-200 ease-in-out"
-                  backdrop-blur-sm
                   align="start"
                   side="bottom"
                   :side-offset="4"
                 >
                   <DropdownMenuItem
-                    class="data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-red-100/20 sm:text-sm data-[highlighted]:text-red-200"
+                    :class="[
+                      'relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none sm:text-sm',
+                      'data-[highlighted]:bg-red-900/20 dark:data-[highlighted]:bg-red-100/20',
+                      'text-white dark:text-white data-[highlighted]:text-red-200 dark:data-[highlighted]:text-red-200',
+                    ]"
                     transition="colors duration-200 ease-in-out"
                   >
                     <button flex items-center gap-1 outline-none @click="handleRemoveModel(model)">
@@ -157,7 +176,7 @@ vrmDialog.onChange(handleAddVRMModel)
             </DropdownMenuRoot>
           </div>
           <div
-            class="min-w-60 lg:min-h-60"
+            class="h-full min-w-80 w-full lg:min-h-60 md:min-w-70 sm:min-w-65"
             aspect="12/16"
             px-1 py-2
           >
@@ -177,7 +196,7 @@ vrmDialog.onChange(handleAddVRMModel)
               </div>
             </div>
           </div>
-          <div h-full w-full flex flex-col>
+          <div w-full flex flex-col>
             <div w-full flex-1 p-2>
               <EditableRoot
                 v-slot="{ isEditing }"