Browse Source

Limit DropdownMenu height to 80% of viewport (#2181)

make DropdownMenu scrollable with 80vh height limit

The DropdownMenu component now automatically becomes scrollable when its content
exceeds 80% of the viewport height. This enhances usability by:

- Limiting maximum height to 80vh using Tailwind's max-h-[80vh]
- Enabling vertical scrolling with overflow-y-auto
- Preserving dropdown positioning and accessibility
axmo 9 months ago
parent
commit
2cd4753e89
1 changed files with 1 additions and 1 deletions
  1. 1 1
      webview-ui/src/components/ui/select-dropdown.tsx

+ 1 - 1
webview-ui/src/components/ui/select-dropdown.tsx

@@ -106,7 +106,7 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 					onEscapeKeyDown={() => setOpen(false)}
 					onEscapeKeyDown={() => setOpen(false)}
 					onInteractOutside={() => setOpen(false)}
 					onInteractOutside={() => setOpen(false)}
 					container={portalContainer}
 					container={portalContainer}
-					className={contentClassName}>
+					className={cn("overflow-y-auto max-h-[80vh]", contentClassName)}>
 					{options.map((option, index) => {
 					{options.map((option, index) => {
 						if (option.type === DropdownOptionType.SEPARATOR) {
 						if (option.type === DropdownOptionType.SEPARATOR) {
 							return <DropdownMenuSeparator key={`sep-${index}`} />
 							return <DropdownMenuSeparator key={`sep-${index}`} />