Add dropdown-menu-subcontent

software-mansion · Nov 18, 2024 · 3a9bad2 · 3a9bad2
1 parent b93c0dd
commit 3a9bad2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx b/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx
@@ -138,7 +138,7 @@ function DeviceSettingsDropdown({ children, disabled }: DeviceSettingsDropdownPr
             </DropdownMenu.SubTrigger>
             <DropdownMenu.Portal>
               <DropdownMenu.SubContent
-                className="dropdown-menu-content"
+                className="dropdown-menu-subcontent"
                 sideOffset={2}
                 alignOffset={-5}>
                 {resetOptions.map((option, index) => (
@@ -225,7 +225,7 @@ const BiometricsItem = () => {
       </DropdownMenu.SubTrigger>
 
       <DropdownMenu.Portal>
-        <DropdownMenu.SubContent className="dropdown-menu-content">
+        <DropdownMenu.SubContent className="dropdown-menu-subcontent">
           <DropdownMenu.Item
             className="dropdown-menu-item"
             onSelect={() => {

diff --git a/packages/vscode-extension/src/webview/components/shared/Dropdown.css b/packages/vscode-extension/src/webview/components/shared/Dropdown.css
@@ -3,7 +3,8 @@ button {
   all: unset;
 }
 
-.dropdown-menu-content {
+.dropdown-menu-content,
+.dropdown-menu-subcontent {
   min-width: 220px;
   background-color: var(--swm-popover-background);
   border-radius: 6px;
@@ -17,10 +18,17 @@ button {
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
-.dropdown-menu-content[data-side="bottom"] {
+.dropdown-menu-subcontent {
+  max-height: calc(var(--radix-dropdown-menu-content-available-height));
+}
+
+.dropdown-menu-content[data-side="bottom"],
+.dropdown-menu-subcontent[data-side="bottom"] {
   animation-name: slideUpAndFade;
 }
-.dropdown-menu-content[data-side="top"] {
+
+.dropdown-menu-content[data-side="top"],
+.dropdown-menu-subcontent[data-side="top"] {
   animation-name: slideDownAndFade;
 }