From 4f7f367320b3fce0219d8341ab98f4195e841b60 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 3 Mar 2025 15:24:35 +0800
Subject: [PATCH] feat(settings-dialog): improve scroll behavior with
 ScrollArea

---
 src/components/settings-dialog.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx
index 315e746..ac089ec 100644
--- a/src/components/settings-dialog.tsx
+++ b/src/components/settings-dialog.tsx
@@ -40,6 +40,7 @@ import {
   SidebarMenuItem,
   SidebarProvider,
 } from "@/components/ui/sidebar";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 const data = {
   nav: [
@@ -111,14 +112,16 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                 </Breadcrumb>
               </div>
             </header>
-            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
-              {Array.from({ length: 10 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
-                />
-              ))}
-            </div>
+            <ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
+              <div className="flex flex-col gap-4">
+                {Array.from({ length: 10 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                  />
+                ))}
+              </div>
+            </ScrollArea>
           </main>
         </SidebarProvider>
       </DialogContent>