Add scroll area to widget settings modal
Some checks failed
Build Frontend / build (push) Failing after 6s
Some checks failed
Build Frontend / build (push) Failing after 6s
Wrapped the widget settings modal content in a ScrollArea to improve usability when there are many settings, preventing overflow and keeping the modal compact.
This commit is contained in:
@@ -22,6 +22,7 @@ import {
|
|||||||
} from "@/components/ui/select"
|
} from "@/components/ui/select"
|
||||||
import { WidgetConfig } from "@/hooks/useWidgetLayout"
|
import { WidgetConfig } from "@/hooks/useWidgetLayout"
|
||||||
import { Settings2 } from "lucide-react"
|
import { Settings2 } from "lucide-react"
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||||
|
|
||||||
interface WidgetSettingsModalProps {
|
interface WidgetSettingsModalProps {
|
||||||
widget: WidgetConfig | null
|
widget: WidgetConfig | null
|
||||||
@@ -69,6 +70,7 @@ export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: Widg
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
|
<ScrollArea className="max-h-[60vh] -mr-4 pr-4">
|
||||||
<div className="space-y-6 py-4">
|
<div className="space-y-6 py-4">
|
||||||
{/* Resize Selection */}
|
{/* Resize Selection */}
|
||||||
<div className="space-y-3 pb-6 border-b border-border/40">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
|||||||
Reference in New Issue
Block a user