From 3e351815834c98188bd55a191bf31744404a9809 Mon Sep 17 00:00:00 2001
From: mofeng-git <mofeng654321@hotmail.com>
Date: Sat, 11 Apr 2026 13:13:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=95=9C=E5=83=8F?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=BB=9A=E5=8A=A8=E6=9D=A1=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20#238?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/MsdDialog.vue | 294 +++++++++++++++++--------------
 web/src/components/MsdSheet.vue  | 216 +++++++++++++----------
 2 files changed, 282 insertions(+), 228 deletions(-)

diff --git a/web/src/components/MsdDialog.vue b/web/src/components/MsdDialog.vue
index 98a5f88a..88146247 100644
--- a/web/src/components/MsdDialog.vue
+++ b/web/src/components/MsdDialog.vue
@@ -28,7 +28,6 @@ import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Separator } from '@/components/ui/separator'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   HardDrive,
   Upload,
@@ -512,7 +511,7 @@ onUnmounted(() => {
   <TooltipProvider>
     <Dialog :open="open" @update:open="emit('update:open', $event)">
       <DialogContent class="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col p-0">
-      <DialogHeader class="px-6 pt-6">
+      <DialogHeader class="px-6 pt-6 shrink-0">
         <DialogTitle class="flex items-center gap-2">
           <HardDrive class="h-5 w-5" />
           {{ t('msd.title') }}
@@ -551,10 +550,11 @@ onUnmounted(() => {
         </DialogDescription>
       </DialogHeader>
 
-      <Separator />
+      <Separator class="shrink-0" />
 
-      <Tabs v-model="activeTab" class="flex-1 flex flex-col overflow-hidden px-6 pb-6 pt-4">
-        <TabsList class="w-full grid grid-cols-2">
+      <div class="flex-1 min-h-0 flex flex-col px-6 pb-6 pt-4">
+        <Tabs v-model="activeTab" class="flex-1 flex flex-col min-h-0">
+          <TabsList class="w-full grid grid-cols-2 shrink-0">
           <TabsTrigger value="images">
             <Disc class="h-4 w-4 mr-1.5" />
             {{ t('msd.images') }}
@@ -566,15 +566,13 @@ onUnmounted(() => {
         </TabsList>
 
         <!-- Tab Description -->
-        <p class="text-xs text-muted-foreground mt-2 mb-1">
+        <p class="text-xs text-muted-foreground mt-2 mb-1 shrink-0">
           {{ activeTab === 'images' ? t('msd.imagesDesc') : t('msd.driveDesc') }}
         </p>
 
-        <ScrollArea class="flex-1 mt-2">
-          <!-- Images Tab -->
-          <TabsContent value="images" class="m-0 space-y-3 pr-4">
+          <TabsContent value="images" class="flex-1 min-h-0 m-0 flex flex-col space-y-3">
             <!-- Compact Upload Toolbar -->
-            <div class="flex items-center gap-2 min-w-0">
+            <div class="shrink-0 flex items-center gap-2 min-w-0">
               <label class="flex-1">
                 <input
                   type="file"
@@ -598,10 +596,10 @@ onUnmounted(() => {
                 {{ t('msd.downloadFromUrl') }}
               </Button>
             </div>
-            <Progress v-if="uploading" :model-value="uploadProgress" class="h-1" />
+            <Progress v-if="uploading" :model-value="uploadProgress" class="h-1 shrink-0" />
 
             <!-- Options - Vertical compact layout -->
-            <div class="flex flex-wrap items-center gap-x-4 gap-y-2 p-2 rounded-lg bg-muted/50 text-xs min-w-0">
+            <div class="shrink-0 flex flex-wrap items-center gap-x-4 gap-y-2 p-2 rounded-lg bg-muted/50 text-xs min-w-0">
               <div class="flex items-center gap-1.5">
                 <span class="text-muted-foreground whitespace-nowrap">{{ t('msd.storageMode') }}:</span>
                 <HelpTooltip :content="mountMode === 'flash' ? t('help.flashMode') : t('help.cdromMode')" icon-size="sm" />
@@ -629,99 +627,101 @@ onUnmounted(() => {
             </div>
 
             <!-- Image List -->
-            <div class="space-y-2 min-w-0">
-              <div class="flex items-center justify-between">
+            <div class="flex-1 min-h-0 flex flex-col space-y-2 min-w-0">
+              <div class="shrink-0 flex items-center justify-between">
                 <h4 class="text-sm font-medium">{{ t('msd.imageList') }}</h4>
                 <Button variant="ghost" size="icon" class="h-7 w-7" @click="loadImages">
                   <RefreshCw class="h-3.5 w-3.5" :class="{ 'animate-spin': loadingImages }" />
                 </Button>
               </div>
 
-              <div v-if="images.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+              <div v-if="images.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                 {{ t('msd.noImages') }}
               </div>
 
-              <div v-else class="space-y-2">
-                <div
-                  v-for="image in images"
-                  :key="image.id"
-                  class="p-3 rounded-lg border transition-colors"
-                  :class="[
-                    msdConnected && systemStore.msd?.imageId === image.id
-                      ? 'border-primary bg-primary/5'
-                      : 'hover:bg-accent/50'
-                  ]"
-                >
-                  <div class="flex items-start justify-between gap-2">
-                    <div class="flex items-start gap-2 w-0 flex-1">
-                      <Disc class="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
-                      <div class="w-0 flex-1">
-                        <Tooltip>
-                          <TooltipTrigger as-child>
-                            <p class="text-sm font-medium cursor-help overflow-hidden text-ellipsis whitespace-nowrap">{{ image.name }}</p>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p class="max-w-sm break-all">{{ image.name }}</p>
-                          </TooltipContent>
-                        </Tooltip>
-                        <div class="flex items-center gap-2 mt-0.5 flex-wrap">
-                          <span class="text-xs text-muted-foreground">{{ formatBytes(image.size) }}</span>
-                          <Tooltip v-if="isLargeFile(image)">
+              <div v-else class="flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
+                <div class="space-y-2">
+                  <div
+                    v-for="image in images"
+                    :key="image.id"
+                    class="p-3 rounded-lg border transition-colors"
+                    :class="[
+                      msdConnected && systemStore.msd?.imageId === image.id
+                        ? 'border-primary bg-primary/5'
+                        : 'hover:bg-accent/50'
+                    ]"
+                  >
+                    <div class="flex items-start justify-between gap-2">
+                      <div class="flex items-start gap-2 w-0 flex-1">
+                        <Disc class="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
+                        <div class="w-0 flex-1">
+                          <Tooltip>
                             <TooltipTrigger as-child>
-                              <Badge
-                                variant="outline"
-                                class="text-[10px] h-4 px-1.5 border-amber-500/50 text-amber-600 dark:text-amber-400 cursor-help"
-                              >
-                                <AlertCircle class="h-2.5 w-2.5 mr-0.5" />
-                                {{ t('msd.largeFileWarning') }}
-                              </Badge>
+                              <p class="text-sm font-medium cursor-help overflow-hidden text-ellipsis whitespace-nowrap">{{ image.name }}</p>
                             </TooltipTrigger>
                             <TooltipContent>
-                              <p>{{ t('msd.largeFileTooltip') }}</p>
+                              <p class="max-w-sm break-all">{{ image.name }}</p>
                             </TooltipContent>
                           </Tooltip>
+                          <div class="flex items-center gap-2 mt-0.5 flex-wrap">
+                            <span class="text-xs text-muted-foreground">{{ formatBytes(image.size) }}</span>
+                            <Tooltip v-if="isLargeFile(image)">
+                              <TooltipTrigger as-child>
+                                <Badge
+                                  variant="outline"
+                                  class="text-[10px] h-4 px-1.5 border-amber-500/50 text-amber-600 dark:text-amber-400 cursor-help"
+                                >
+                                  <AlertCircle class="h-2.5 w-2.5 mr-0.5" />
+                                  {{ t('msd.largeFileWarning') }}
+                                </Badge>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>{{ t('msd.largeFileTooltip') }}</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div class="flex items-center gap-1.5 shrink-0">
-                      <template v-if="msdConnected && systemStore.msd?.imageId === image.id">
-                        <Badge variant="default" class="text-xs h-7 px-2">
-                          <span class="relative flex h-1.5 w-1.5 mr-1.5">
-                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
-                            <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-white"></span>
-                          </span>
-                          {{ t('common.connected') }}
-                        </Badge>
-                      </template>
-                      <template v-else>
+                      <div class="flex items-center gap-1.5 shrink-0">
+                        <template v-if="msdConnected && systemStore.msd?.imageId === image.id">
+                          <Badge variant="default" class="text-xs h-7 px-2">
+                            <span class="relative flex h-1.5 w-1.5 mr-1.5">
+                              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
+                              <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-white"></span>
+                            </span>
+                            {{ t('common.connected') }}
+                          </Badge>
+                        </template>
+                        <template v-else>
+                          <Button
+                            variant="default"
+                            size="sm"
+                            class="h-7 text-xs"
+                            :disabled="operationInProgress"
+                            @click="connectImage(image)"
+                          >
+                            <Link v-if="!connecting" class="h-3.5 w-3.5 mr-1" />
+                            <span v-if="connecting">{{ t('common.connecting') }}...</span>
+                            <span v-else>{{ t('msd.connect') }}</span>
+                          </Button>
+                        </template>
                         <Button
-                          variant="default"
-                          size="sm"
-                          class="h-7 text-xs"
-                          :disabled="operationInProgress"
-                          @click="connectImage(image)"
+                          variant="ghost"
+                          size="icon"
+                          class="h-7 w-7 text-destructive hover:text-destructive"
+                          :disabled="operationInProgress || (msdConnected && systemStore.msd?.imageId === image.id)"
+                          @click="confirmDelete('image', image.id, image.name)"
                         >
-                          <Link v-if="!connecting" class="h-3.5 w-3.5 mr-1" />
-                          <span v-if="connecting">{{ t('common.connecting') }}...</span>
-                          <span v-else>{{ t('msd.connect') }}</span>
+                          <Trash2 class="h-3.5 w-3.5" />
                         </Button>
-                      </template>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7 text-destructive hover:text-destructive"
-                        :disabled="operationInProgress || (msdConnected && systemStore.msd?.imageId === image.id)"
-                        @click="confirmDelete('image', image.id, image.name)"
-                      >
-                        <Trash2 class="h-3.5 w-3.5" />
-                      </Button>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
 
               <!-- System Storage Footer -->
-              <div v-if="systemStore.diskSpace" class="pt-2 border-t mt-2">
+              <div v-if="systemStore.diskSpace" class="shrink-0 pt-2 border-t mt-2">
                 <p class="text-[11px] text-muted-foreground text-center">
                   {{ t('msd.systemAvailable') }}: {{ formatBytes(systemStore.diskSpace.available) }}
                 </p>
@@ -729,10 +729,9 @@ onUnmounted(() => {
             </div>
           </TabsContent>
 
-          <!-- Drive Tab -->
-          <TabsContent value="drive" class="m-0 space-y-4 pr-4">
+          <TabsContent value="drive" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
             <template v-if="!driveInitialized">
-              <div class="text-center py-8 space-y-4">
+              <div class="shrink-0 text-center py-8 space-y-4">
                 <HardDrive class="h-10 w-10 mx-auto text-muted-foreground" />
                 <p class="text-sm text-muted-foreground">{{ t('msd.driveNotInitialized') }}</p>
                 <Button size="sm" @click="initializeDrive">
@@ -743,7 +742,7 @@ onUnmounted(() => {
 
             <template v-else>
               <!-- Drive Info Card -->
-              <div class="p-3 rounded-lg border space-y-3" :class="msdConnected && msdMode === 'drive' ? 'border-primary bg-primary/5' : 'bg-muted/50'">
+              <div class="shrink-0 p-3 rounded-lg border space-y-3" :class="msdConnected && msdMode === 'drive' ? 'border-primary bg-primary/5' : 'bg-muted/50'">
                 <div class="flex items-center justify-between">
                   <div class="flex items-center gap-2">
                     <HardDrive class="h-4 w-4 text-muted-foreground" />
@@ -801,9 +800,9 @@ onUnmounted(() => {
               </div>
 
               <!-- File Browser -->
-              <div class="space-y-2">
+              <div class="flex-1 min-h-0 flex flex-col space-y-2">
                 <!-- Toolbar -->
-                <div class="flex items-center justify-between gap-2">
+                <div class="shrink-0 flex items-center justify-between gap-2">
                   <div class="flex items-center gap-1 min-w-0 flex-1">
                     <Button
                       v-if="currentPath !== '/'"
@@ -827,7 +826,7 @@ onUnmounted(() => {
                       </template>
                     </nav>
                   </div>
-                  <div class="flex items-center gap-1 shrink-0">
+                  <div class="shrink-0 flex items-center gap-1 shrink-0">
                     <label>
                       <input type="file" class="hidden" :disabled="uploadingFile" @change="handleFileUpload" />
                       <Button variant="ghost" size="icon" as="span" class="h-7 w-7 cursor-pointer">
@@ -843,67 +842,69 @@ onUnmounted(() => {
                   </div>
                 </div>
 
-                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1" />
+                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1 shrink-0" />
 
                 <!-- File List -->
-                <div v-if="driveFiles.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+                <div v-if="driveFiles.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                   {{ t('msd.emptyFolder') }}
                 </div>
 
-                <div v-else class="space-y-1">
-                  <div
-                    v-for="file in driveFiles"
-                    :key="file.path"
-                    class="flex items-center justify-between p-2 rounded-lg hover:bg-accent/50 transition-colors"
-                  >
+                <div v-else class="flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
+                  <div class="space-y-1">
                     <div
-                      class="flex items-center gap-2 cursor-pointer flex-1 min-w-0"
-                      @click="file.is_dir && navigateTo(file.path)"
+                      v-for="file in driveFiles"
+                      :key="file.path"
+                      class="flex items-center justify-between p-2 rounded-lg hover:bg-accent/50 transition-colors"
                     >
-                      <Folder v-if="file.is_dir" class="h-4 w-4 text-blue-500 shrink-0" />
-                      <File v-else class="h-4 w-4 text-muted-foreground shrink-0" />
-                      <div class="min-w-0">
-                        <Tooltip>
-                          <TooltipTrigger as-child>
-                            <p class="text-sm font-medium truncate cursor-help">{{ file.name }}</p>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p class="max-w-sm break-all">{{ file.name }}</p>
-                          </TooltipContent>
-                        </Tooltip>
-                        <p v-if="!file.is_dir" class="text-xs text-muted-foreground">
-                          {{ formatBytes(file.size) }}
-                        </p>
+                      <div
+                        class="flex items-center gap-2 cursor-pointer flex-1 min-w-0"
+                        @click="file.is_dir && navigateTo(file.path)"
+                      >
+                        <Folder v-if="file.is_dir" class="h-4 w-4 text-blue-500 shrink-0" />
+                        <File v-else class="h-4 w-4 text-muted-foreground shrink-0" />
+                        <div class="min-w-0">
+                          <Tooltip>
+                            <TooltipTrigger as-child>
+                              <p class="text-sm font-medium truncate cursor-help">{{ file.name }}</p>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p class="max-w-sm break-all">{{ file.name }}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                          <p v-if="!file.is_dir" class="text-xs text-muted-foreground">
+                            {{ formatBytes(file.size) }}
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-0.5 shrink-0">
+                        <Button
+                          v-if="!file.is_dir"
+                          variant="ghost"
+                          size="icon"
+                          class="h-7 w-7"
+                          as="a"
+                          :href="msdApi.downloadDriveFile(file.path)"
+                          download
+                        >
+                          <Download class="h-3.5 w-3.5" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          class="h-7 w-7 text-destructive"
+                          @click="confirmDelete('file', file.path, file.name)"
+                        >
+                          <Trash2 class="h-3.5 w-3.5" />
+                        </Button>
                       </div>
-                    </div>
-                    <div class="flex items-center gap-0.5 shrink-0">
-                      <Button
-                        v-if="!file.is_dir"
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7"
-                        as="a"
-                        :href="msdApi.downloadDriveFile(file.path)"
-                        download
-                      >
-                        <Download class="h-3.5 w-3.5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7 text-destructive"
-                        @click="confirmDelete('file', file.path, file.name)"
-                      >
-                        <Trash2 class="h-3.5 w-3.5" />
-                      </Button>
                     </div>
                   </div>
                 </div>
               </div>
             </template>
           </TabsContent>
-        </ScrollArea>
-      </Tabs>
+        </Tabs>
+      </div>
     </DialogContent>
   </Dialog>
   </TooltipProvider>
@@ -1102,3 +1103,28 @@ onUnmounted(() => {
     </DialogContent>
   </Dialog>
 </template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* For Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+}
+</style>
diff --git a/web/src/components/MsdSheet.vue b/web/src/components/MsdSheet.vue
index ff67a5b9..985f2c28 100644
--- a/web/src/components/MsdSheet.vue
+++ b/web/src/components/MsdSheet.vue
@@ -18,7 +18,6 @@ import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Dialog,
   DialogContent,
@@ -294,8 +293,8 @@ onMounted(async () => {
 
 <template>
   <Sheet :open="open" @update:open="emit('update:open', $event)">
-    <SheetContent side="right" class="w-full sm:max-w-lg overflow-hidden flex flex-col">
-      <SheetHeader>
+    <SheetContent side="right" class="w-full sm:max-w-lg overflow-hidden flex flex-col h-[dvh]">
+      <SheetHeader class="shrink-0">
         <div class="flex items-center justify-between pr-8">
           <div>
             <SheetTitle class="flex items-center gap-2">
@@ -314,10 +313,10 @@ onMounted(async () => {
         </div>
       </SheetHeader>
 
-      <Separator class="my-4" />
+      <Separator class="my-4 shrink-0" />
 
-      <Tabs v-model="activeTab" class="flex-1 flex flex-col overflow-hidden">
-        <TabsList class="w-full grid grid-cols-2">
+      <Tabs v-model="activeTab" class="flex-1 flex flex-col min-h-0 overflow-hidden">
+        <TabsList class="w-full grid grid-cols-2 shrink-0">
           <TabsTrigger value="images">
             <Disc class="h-4 w-4 mr-1.5" />
             {{ t('msd.images') }}
@@ -328,11 +327,11 @@ onMounted(async () => {
           </TabsTrigger>
         </TabsList>
 
-        <ScrollArea class="flex-1 mt-4">
+        <div class="flex-1 min-h-0 mt-4 flex flex-col">
           <!-- Images Tab -->
-          <TabsContent value="images" class="m-0 space-y-4">
+          <TabsContent value="images" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
             <!-- Upload Area -->
-            <div class="space-y-3">
+            <div class="shrink-0 space-y-3">
               <label class="block">
                 <input
                   type="file"
@@ -352,7 +351,7 @@ onMounted(async () => {
             </div>
 
             <!-- Options -->
-            <div class="flex items-center gap-4 p-3 rounded-lg bg-muted/50">
+            <div class="shrink-0 flex items-center gap-4 p-3 rounded-lg bg-muted/50">
               <div class="flex items-center gap-2">
                 <Switch id="cdrom" v-model:checked="cdromMode" />
                 <Label for="cdrom" class="text-xs">{{ t('msd.cdromMode') }}</Label>
@@ -364,63 +363,65 @@ onMounted(async () => {
             </div>
 
             <!-- Image List -->
-            <div class="space-y-2">
-              <div class="flex items-center justify-between">
+            <div class="flex-1 min-h-0 flex flex-col space-y-2">
+              <div class="shrink-0 flex items-center justify-between">
                 <h4 class="text-sm font-medium">{{ t('msd.imageList') }}</h4>
                 <Button variant="ghost" size="icon" class="h-7 w-7" @click="loadImages">
                   <RefreshCw class="h-3.5 w-3.5" :class="{ 'animate-spin': loadingImages }" />
                 </Button>
               </div>
 
-              <div v-if="images.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+              <div v-if="images.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                 {{ t('msd.noImages') }}
               </div>
 
-              <div v-else class="space-y-1.5">
-                <div
-                  v-for="image in images"
-                  :key="image.id"
-                  class="flex items-center justify-between p-2.5 rounded-lg border hover:bg-accent/50 transition-colors"
-                >
-                  <div class="flex items-center gap-2.5 min-w-0 flex-1">
-                    <Disc class="h-4 w-4 text-muted-foreground shrink-0" />
-                    <div class="min-w-0">
-                      <p class="text-sm font-medium truncate">{{ image.name }}</p>
-                      <p class="text-xs text-muted-foreground">
-                        {{ formatBytes(image.size) }}
-                      </p>
+              <ScrollArea v-else class="flex-1 min-h-0 pr-4">
+                <div class="space-y-1.5">
+                  <div
+                    v-for="image in images"
+                    :key="image.id"
+                    class="flex items-center justify-between p-2.5 rounded-lg border hover:bg-accent/50 transition-colors"
+                  >
+                    <div class="flex items-center gap-2.5 min-w-0 flex-1">
+                      <Disc class="h-4 w-4 text-muted-foreground shrink-0" />
+                      <div class="min-w-0">
+                        <p class="text-sm font-medium truncate">{{ image.name }}</p>
+                        <p class="text-xs text-muted-foreground">
+                          {{ formatBytes(image.size) }}
+                        </p>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-1 shrink-0">
+                      <Button
+                        v-if="!msdConnected || systemStore.msd?.imageId !== image.id"
+                        variant="outline"
+                        size="sm"
+                        class="h-7 text-xs"
+                        @click="connectImage(image)"
+                      >
+                        <Link class="h-3.5 w-3.5 mr-1" />
+                        {{ t('msd.connect') }}
+                      </Button>
+                      <Badge v-else variant="default" class="text-xs">{{ t('common.connected') }}</Badge>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        class="h-7 w-7 text-destructive"
+                        @click="confirmDelete('image', image.id, image.name)"
+                      >
+                        <Trash2 class="h-3.5 w-3.5" />
+                      </Button>
                     </div>
                   </div>
-                  <div class="flex items-center gap-1 shrink-0">
-                    <Button
-                      v-if="!msdConnected || systemStore.msd?.imageId !== image.id"
-                      variant="outline"
-                      size="sm"
-                      class="h-7 text-xs"
-                      @click="connectImage(image)"
-                    >
-                      <Link class="h-3.5 w-3.5 mr-1" />
-                      {{ t('msd.connect') }}
-                    </Button>
-                    <Badge v-else variant="default" class="text-xs">{{ t('common.connected') }}</Badge>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      class="h-7 w-7 text-destructive"
-                      @click="confirmDelete('image', image.id, image.name)"
-                    >
-                      <Trash2 class="h-3.5 w-3.5" />
-                    </Button>
-                  </div>
                 </div>
-              </div>
+              </ScrollArea>
             </div>
           </TabsContent>
 
           <!-- Drive Tab -->
-          <TabsContent value="drive" class="m-0 space-y-4">
+          <TabsContent value="drive" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
             <template v-if="!driveInitialized">
-              <div class="text-center py-8 space-y-4">
+              <div class="shrink-0 text-center py-8 space-y-4">
                 <HardDrive class="h-10 w-10 mx-auto text-muted-foreground" />
                 <p class="text-sm text-muted-foreground">{{ t('msd.driveNotInitialized') }}</p>
                 <Button size="sm" @click="initializeDrive">
@@ -431,7 +432,7 @@ onMounted(async () => {
 
             <template v-else>
               <!-- Drive Info -->
-              <div class="p-3 rounded-lg bg-muted/50 space-y-2">
+              <div class="shrink-0 p-3 rounded-lg bg-muted/50 space-y-2">
                 <div class="flex items-center justify-between">
                   <div class="space-y-0.5">
                     <p class="text-xs text-muted-foreground">{{ t('msd.driveSize') }}: {{ (driveInfo?.size || 0) / 1024 / 1024 }}MB</p>
@@ -459,9 +460,9 @@ onMounted(async () => {
               </div>
 
               <!-- File Browser -->
-              <div class="space-y-2">
+              <div class="flex-1 min-h-0 flex flex-col space-y-2">
                 <!-- Toolbar -->
-                <div class="flex items-center justify-between gap-2">
+                <div class="shrink-0 flex items-center justify-between gap-2">
                   <div class="flex items-center gap-1 min-w-0 flex-1">
                     <Button
                       v-if="currentPath !== '/'"
@@ -485,7 +486,7 @@ onMounted(async () => {
                       </template>
                     </nav>
                   </div>
-                  <div class="flex items-center gap-1 shrink-0">
+                  <div class="shrink-0 flex items-center gap-1 shrink-0">
                     <label>
                       <input type="file" class="hidden" :disabled="uploadingFile" @change="handleFileUpload" />
                       <Button variant="ghost" size="icon" as="span" class="h-7 w-7 cursor-pointer">
@@ -501,59 +502,61 @@ onMounted(async () => {
                   </div>
                 </div>
 
-                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1" />
+                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1 shrink-0" />
 
                 <!-- File List -->
-                <div v-if="driveFiles.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+                <div v-if="driveFiles.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                   {{ t('msd.emptyFolder') }}
                 </div>
 
-                <div v-else class="space-y-1">
-                  <div
-                    v-for="file in driveFiles"
-                    :key="file.path"
-                    class="flex items-center justify-between p-2 rounded-lg hover:bg-accent/50 transition-colors"
-                  >
+                <ScrollArea v-else class="flex-1 min-h-0 pr-4">
+                  <div class="space-y-1">
                     <div
-                      class="flex items-center gap-2 cursor-pointer flex-1 min-w-0"
-                      @click="file.is_dir && navigateTo(file.path)"
+                      v-for="file in driveFiles"
+                      :key="file.path"
+                      class="flex items-center justify-between p-2 rounded-lg hover:bg-accent/50 transition-colors"
                     >
-                      <Folder v-if="file.is_dir" class="h-4 w-4 text-blue-500 shrink-0" />
-                      <File v-else class="h-4 w-4 text-muted-foreground shrink-0" />
-                      <div class="min-w-0">
-                        <p class="text-sm font-medium truncate">{{ file.name }}</p>
-                        <p v-if="!file.is_dir" class="text-xs text-muted-foreground">
-                          {{ formatBytes(file.size) }}
-                        </p>
+                      <div
+                        class="flex items-center gap-2 cursor-pointer flex-1 min-w-0"
+                        @click="file.is_dir && navigateTo(file.path)"
+                      >
+                        <Folder v-if="file.is_dir" class="h-4 w-4 text-blue-500 shrink-0" />
+                        <File v-else class="h-4 w-4 text-muted-foreground shrink-0" />
+                        <div class="min-w-0">
+                          <p class="text-sm font-medium truncate">{{ file.name }}</p>
+                          <p v-if="!file.is_dir" class="text-xs text-muted-foreground">
+                            {{ formatBytes(file.size) }}
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-0.5 shrink-0">
+                        <Button
+                          v-if="!file.is_dir"
+                          variant="ghost"
+                          size="icon"
+                          class="h-7 w-7"
+                          as="a"
+                          :href="msdApi.downloadDriveFile(file.path)"
+                          download
+                        >
+                          <Download class="h-3.5 w-3.5" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          class="h-7 w-7 text-destructive"
+                          @click="confirmDelete('file', file.path, file.name)"
+                        >
+                          <Trash2 class="h-3.5 w-3.5" />
+                        </Button>
                       </div>
                     </div>
-                    <div class="flex items-center gap-0.5 shrink-0">
-                      <Button
-                        v-if="!file.is_dir"
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7"
-                        as="a"
-                        :href="msdApi.downloadDriveFile(file.path)"
-                        download
-                      >
-                        <Download class="h-3.5 w-3.5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7 text-destructive"
-                        @click="confirmDelete('file', file.path, file.name)"
-                      >
-                        <Trash2 class="h-3.5 w-3.5" />
-                      </Button>
-                    </div>
                   </div>
-                </div>
+                </ScrollArea>
               </div>
             </template>
           </TabsContent>
-        </ScrollArea>
+        </div>
       </Tabs>
     </SheetContent>
   </Sheet>
@@ -588,3 +591,28 @@ onMounted(async () => {
     </DialogContent>
   </Dialog>
 </template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* For Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+}
+</style>