From bbd24f1e9827521d3585839739844247e7d175f1 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Wed, 20 Nov 2024 12:22:46 -0800
Subject: [PATCH] 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
---
 src/interface/web/app/settings/page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx
index 6819e7c0..98c0179a 100644
--- a/src/interface/web/app/settings/page.tsx
+++ b/src/interface/web/app/settings/page.tsx
@@ -387,7 +387,13 @@ const DropdownComponent: React.FC<DropdownComponentProps> = ({ items, selected,
                             <CaretDown className="h-4 w-4 ml-auto text-muted-foreground" />
                         </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent>
+                    <DropdownMenuContent
+                        style={{
+                            maxHeight: "200px",
+                            overflowY: "auto",
+                            minWidth: "var(--radix-dropdown-menu-trigger-width)",
+                        }}
+                    >
                         <DropdownMenuRadioGroup
                             value={position}
                             onValueChange={async (value) => {