feat(settings): use overlay scrollbars for sub-page scroll areas

src/components/settings/appearance-settings.tsx

@@ -4,6 +4,7 @@ import { Monitor, Moon, RotateCcw, Sun, Type } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { useTheme } from "next-themes"
 import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import {
   Select,
   SelectContent,
@@ -47,7 +48,7 @@ export function AppearanceSettings() {
   }
 
   return (
-    <div className="h-full overflow-auto">
+    <ScrollArea className="h-full">
       <div className="w-full space-y-4">
         {/* ===== Theme Mode (existing) ===== */}
         <section className="rounded-xl border bg-card p-4 space-y-4">
@@ -218,6 +219,6 @@ export function AppearanceSettings() {
           </Button>
         </div>
       </div>
-    </div>
+    </ScrollArea>
   )
 }

src/components/settings/chat-channel-settings.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from "next-intl"
 
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { ChannelListTab } from "./channel-list-tab"
 import { ChannelCommandsTab } from "./channel-commands-tab"
@@ -12,7 +13,7 @@ export function ChatChannelSettings() {
   const t = useTranslations("ChatChannelSettings")
 
   return (
-    <div className="h-full overflow-auto">
+    <ScrollArea className="h-full">
       <Tabs defaultValue="channels" className="w-full space-y-4">
         <section className="space-y-3">
           <div>
@@ -42,6 +43,6 @@ export function ChatChannelSettings() {
           <ChannelOtherTab />
         </TabsContent>
       </Tabs>
-    </div>
+    </ScrollArea>
   )
 }

src/components/settings/model-provider-settings.tsx

@@ -7,6 +7,7 @@ import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import {
   Select,
   SelectContent,
@@ -91,7 +92,7 @@ export function ModelProviderSettings() {
   }, [deleteTarget, loadProviders, t])
 
   return (
-    <div className="h-full overflow-auto">
+    <ScrollArea className="h-full">
       <section className="space-y-3">
         <div>
           <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>
@@ -225,6 +226,6 @@ export function ModelProviderSettings() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </ScrollArea>
   )
 }

src/components/settings/shortcut-settings.tsx

@@ -15,6 +15,7 @@ import {
   shortcutFromKeyboardEvent,
 } from "@/lib/keyboard-shortcuts"
 import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 const SHARED_SHORTCUT_PAIRS: Array<[ShortcutActionId, ShortcutActionId]> = [
   ["new_terminal_tab", "new_conversation"],
@@ -98,7 +99,7 @@ export function ShortcutSettings() {
   }, [actionTitle, recordingAction, shortcuts, t, updateShortcut])
 
   return (
-    <div className="h-full overflow-auto">
+    <ScrollArea className="h-full">
       <div className="w-full space-y-4">
         <section className="rounded-xl border bg-card p-4 space-y-4">
           <div className="flex items-center justify-between gap-3">
@@ -162,6 +163,6 @@ export function ShortcutSettings() {
           </div>
         </section>
       </div>
-    </div>
+    </ScrollArea>
   )
 }

src/components/settings/system-network-settings.tsx

@@ -17,6 +17,7 @@ import { toast } from "sonner"
 import { useAppI18n } from "@/components/i18n-provider"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import {
   Select,
   SelectContent,
@@ -339,7 +340,7 @@ export function SystemNetworkSettings() {
   }
 
   return (
-    <div className="h-full overflow-auto">
+    <ScrollArea className="h-full">
       <div className="w-full space-y-4">
         <section className="space-y-1">
           <div className="flex items-center justify-between">
@@ -588,6 +589,6 @@ export function SystemNetworkSettings() {
           </div>
         </section>
       </div>
-    </div>
+    </ScrollArea>
   )
 }

src/components/settings/version-control-settings.tsx

@@ -15,6 +15,7 @@ import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -344,7 +345,7 @@ export function VersionControlSettings() {
   }
 
   return (
-    <div className="h-full overflow-auto">
+    <ScrollArea className="h-full">
       <div className="w-full space-y-4">
         <section className="space-y-1">
           <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>
@@ -551,6 +552,6 @@ export function VersionControlSettings() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </ScrollArea>
   )
 }

src/components/settings/web-service-settings.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState } from "react"
 import { Check, Copy, ExternalLink, Eye, EyeOff } from "lucide-react"
 import { useTranslations } from "next-intl"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import {
   startWebServer,
   stopWebServer,
@@ -145,6 +146,7 @@ export function WebServiceSettings() {
   const isRunning = status !== null
 
   return (
+    <ScrollArea className="h-full">
       <div className="space-y-6">
         <div>
           <h3 className="text-lg font-medium">{t("sectionTitle")}</h3>
@@ -196,7 +198,11 @@ export function WebServiceSettings() {
           {isRunning && (
             <div className="space-y-3">
               {status.addresses.map((addr) => (
-              <AddressCard key={addr} label={t("addressLabel")} value={addr} />
+                <AddressCard
+                  key={addr}
+                  label={t("addressLabel")}
+                  value={addr}
+                />
               ))}
               <TokenCard label={t("tokenLabel")} value={status.token} />
               <p className="text-xs text-muted-foreground">{t("tokenHint")}</p>
@@ -204,5 +210,6 @@ export function WebServiceSettings() {
           )}
         </div>
       </div>
+    </ScrollArea>
   )
 }