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,64 +146,70 @@ export function WebServiceSettings() {
   const isRunning = status !== null
 
   return (
-    <div className="space-y-6">
+    <ScrollArea className="h-full">
-      <div>
+      <div className="space-y-6">
-        <h3 className="text-lg font-medium">{t("sectionTitle")}</h3>
+        <div>
-        <p className="text-sm text-muted-foreground">
+          <h3 className="text-lg font-medium">{t("sectionTitle")}</h3>
-          {t("sectionDescription")}
+          <p className="text-sm text-muted-foreground">
-        </p>
+            {t("sectionDescription")}
-      </div>
+          </p>
-
-      <div className="space-y-4">
-        {/* Port config */}
-        <div className="flex items-center gap-4">
-          <label className="w-20 text-sm font-medium">{t("port")}</label>
-          <input
-            type="number"
-            value={port}
-            onChange={(e) => setPort(e.target.value)}
-            disabled={isRunning}
-            min={1024}
-            max={65535}
-            className="flex h-9 w-32 rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-          />
         </div>
 
-        {/* Start/Stop button */}
+        <div className="space-y-4">
-        <div className="flex items-center gap-4">
+          {/* Port config */}
-          <label className="w-20 text-sm font-medium">{t("status")}</label>
+          <div className="flex items-center gap-4">
-          <div className="flex items-center gap-3">
+            <label className="w-20 text-sm font-medium">{t("port")}</label>
-            <span
+            <input
-              className={`inline-block h-2 w-2 rounded-full ${
+              type="number"
-                isRunning ? "bg-green-500" : "bg-muted-foreground/30"
+              value={port}
-              }`}
+              onChange={(e) => setPort(e.target.value)}
+              disabled={isRunning}
+              min={1024}
+              max={65535}
+              className="flex h-9 w-32 rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
             />
-            <span className="text-sm">
-              {isRunning ? t("running") : t("stopped")}
-            </span>
-            <button
-              onClick={isRunning ? handleStop : handleStart}
-              disabled={loading}
-              className="inline-flex h-8 items-center rounded-md border border-input bg-background px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-            >
-              {loading ? t("processing") : isRunning ? t("stop") : t("start")}
-            </button>
           </div>
+
+          {/* Start/Stop button */}
+          <div className="flex items-center gap-4">
+            <label className="w-20 text-sm font-medium">{t("status")}</label>
+            <div className="flex items-center gap-3">
+              <span
+                className={`inline-block h-2 w-2 rounded-full ${
+                  isRunning ? "bg-green-500" : "bg-muted-foreground/30"
+                }`}
+              />
+              <span className="text-sm">
+                {isRunning ? t("running") : t("stopped")}
+              </span>
+              <button
+                onClick={isRunning ? handleStop : handleStart}
+                disabled={loading}
+                className="inline-flex h-8 items-center rounded-md border border-input bg-background px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+              >
+                {loading ? t("processing") : isRunning ? t("stop") : t("start")}
+              </button>
+            </div>
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          {/* Connection info */}
+          {isRunning && (
+            <div className="space-y-3">
+              {status.addresses.map((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>
+            </div>
+          )}
         </div>
-
-        {error && <p className="text-sm text-destructive">{error}</p>}
-
-        {/* Connection info */}
-        {isRunning && (
-          <div className="space-y-3">
-            {status.addresses.map((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>
-          </div>
-        )}
       </div>
-    </div>
+    </ScrollArea>
   )
 }