Constrain dropdown height to fit in the screen (#7730)

* constrain dropdown height with css variable

* fix duplicated dependency

* fix pendantic lockfile

4 files changed, 7 insertions, 10 deletions

diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index eb91e014f..7bf4dde18 100644
--- 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
index 2e118c433..d5a0f9b43 100644
--- 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
index 02be8cf83..40dcc0d17 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -394,10 +394,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
index a1730af66..62fbf5cae 100644
--- 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>