feat: refresh dashboards experience

src/components/ui/searchable-combobox.tsx

@@ -31,6 +31,9 @@ type SearchableComboboxProps = {
   clearLabel?: string
   renderValue?: (option: SearchableComboboxOption | null) => React.ReactNode
   renderOption?: (option: SearchableComboboxOption, active: boolean) => React.ReactNode
+  contentClassName?: string
+  scrollClassName?: string
+  scrollProps?: React.HTMLAttributes<HTMLDivElement>
 }
 
 export function SearchableCombobox({
@@ -46,6 +49,9 @@ export function SearchableCombobox({
   clearLabel = "Limpar seleção",
   renderValue,
   renderOption,
+  contentClassName,
+  scrollClassName,
+  scrollProps,
 }: SearchableComboboxProps) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState("")
@@ -103,7 +109,7 @@ export function SearchableCombobox({
           <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="z-50 w-[var(--radix-popover-trigger-width)] p-0">
+      <PopoverContent className={cn("z-50 w-[var(--radix-popover-trigger-width)] max-w-[480px] p-0", contentClassName)}>
         <div className="border-b border-border/80 p-2">
           <Input
             autoFocus
@@ -132,7 +138,10 @@ export function SearchableCombobox({
             <Separator />
           </>
         ) : null}
-        <ScrollArea className="max-h-60">
+        <ScrollArea
+          className={cn("max-h-60", scrollClassName)}
+          {...scrollProps}
+        >
           {filtered.length === 0 ? (
             <div className="px-3 py-4 text-sm text-muted-foreground">{emptyText}</div>
           ) : (