Improve dropdown menus on web app setting page with scroll & min-width

- Previously when settings list became long the dropdown height would
  overflow screen height. Now it's max height is clamped and  y-scroll
- Previously the dropdown content would take width of content. This
  would mean the menu could sometimes be less wide than the button. It
  felt strange. Now dropdown content is at least width of parent button
This commit is contained in:
Debanjum 2024-11-20 12:22:46 -08:00
parent 80df3bb8c4
commit bbd24f1e98

View file

@ -387,7 +387,13 @@ const DropdownComponent: React.FC<DropdownComponentProps> = ({ items, selected,
<CaretDown className="h-4 w-4 ml-auto text-muted-foreground" /> <CaretDown className="h-4 w-4 ml-auto text-muted-foreground" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent
style={{
maxHeight: "200px",
overflowY: "auto",
minWidth: "var(--radix-dropdown-menu-trigger-width)",
}}
>
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
value={position} value={position}
onValueChange={async (value) => { onValueChange={async (value) => {