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>
   )
 }