Add scroll area to widget settings modal

Wrapped the widget settings modal content in a ScrollArea to improve usability when there are many settings, preventing overflow and keeping the modal compact.

components/dashboard/widget-settings-modal.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/select"
 import { WidgetConfig } from "@/hooks/useWidgetLayout"
 import { Settings2 } from "lucide-react"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 interface WidgetSettingsModalProps {
     widget: WidgetConfig | null
@@ -69,6 +70,7 @@ export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: Widg
                     </DialogDescription>
                 </DialogHeader>
 
+                <ScrollArea className="max-h-[60vh] -mr-4 pr-4">
                     <div className="space-y-6 py-4">
                         {/* Resize Selection */}
                         <div className="space-y-3 pb-6 border-b border-border/40">
@@ -276,6 +278,7 @@ export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: Widg
                             )}
                         </div>
                     </div>
+                </ScrollArea>
 
                 <DialogFooter>
                     <Button variant="outline" onClick={() => onOpenChange(false)}>