constrain dropdown height with css variable

bluesky-social · Feb 12, 2025 · 4e99550 · 4e99550
1 parent aa1fa28
commit 4e99550
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 263 deletions.
diff --git a/package.json b/package.json
@@ -78,10 +78,10 @@
     "@mattermost/react-native-paste-input": "^0.7.1",
     "@miblanchard/react-native-slider": "^2.3.1",
     "@mozzius/expo-dynamic-app-icon": "^1.5.0",
-    "@radix-ui/react-dismissable-layer": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "2.0.1",
+    "@radix-ui/react-dismissable-layer": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
     "@radix-ui/react-focus-guards": "^1.1.1",
-    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-focus-scope": "^1.1.2",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-menu/menu": "^1.1.7",
     "@react-native-picker/picker": "2.10.2",

diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
@@ -187,7 +187,7 @@ export function Outer({
         collisionPadding={{left: 5, right: 5, bottom: 5}}
         loop
         aria-label="Test"
-        className="dropdown-menu-transform-origin">
+        className="dropdown-menu-transform-origin dropdown-menu-constrain-size">
         <View
           style={[
             a.rounded_sm,

diff --git a/src/style.css b/src/style.css
@@ -237,6 +237,9 @@ input:focus {
 .dropdown-menu-transform-origin > * {
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
 }
+.dropdown-menu-constrain-size > * {
+  max-height: var(--radix-dropdown-menu-content-available-height);
+}
 
 .force-no-clicks > *,
 .force-no-clicks * {

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
@@ -389,10 +389,7 @@ function SearchLanguageDropdown({
           </Button>
         )}
       </Menu.Trigger>
-      <Menu.Outer
-        // HACKFIX: Currently there is no height limit for Radix dropdowns,
-        // so if it's too tall it just goes off screen. TODO: fix internally -sfn
-        style={web({maxHeight: '70vh'})}>
+      <Menu.Outer>
         <Menu.LabelText>
           <Trans>Filter search by language</Trans>
         </Menu.LabelText>

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
@@ -33,7 +33,7 @@ import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {atoms as a, tokens, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
 import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
@@ -235,10 +235,7 @@ function SwitchMenuItems({
     closeEverything()
   }
   return (
-    <Menu.Outer
-      // HACKFIX: Currently there is no height limit for Radix dropdowns,
-      // so if it's too tall it just goes off screen. TODO: fix internally -sfn
-      style={web({maxHeight: '70vh'})}>
+    <Menu.Outer>
       {accounts && accounts.length > 0 && (
         <>
           <Menu.Group>