Skip to content

fix: constrain actions filter dropdown height and prevent mobile overflow#337

Open
AbhiVarde wants to merge 1 commit intobetter-auth:mainfrom
AbhiVarde:fix/actions-filter-dropdown-height-and-mobile
Open

fix: constrain actions filter dropdown height and prevent mobile overflow#337
AbhiVarde wants to merge 1 commit intobetter-auth:mainfrom
AbhiVarde:fix/actions-filter-dropdown-height-and-mobile

Conversation

@AbhiVarde
Copy link
Copy Markdown
Contributor

Problem

  • Filter dropdown grew too tall with many branches and actors making it unusable
  • On mobile devices the dropdown overflowed off screen and was cut off on both left and right sides
  • Scrollbar was visible due to global scrollbar-width: thin in globals.css

Solution

  • Changed dropdown from absolute to fixed positioning using dropdownRef to calculate exact viewport position so it always renders above parent scroll containers
  • Added max-w-65 so dropdown width is consistent across all devices
  • Added max-h-[80vh] overflow-y-auto to cap height and scroll internally
  • Used inline style={{ scrollbarWidth: "none", msOverflowStyle: "none" }} to override the global scrollbar style
  • Used Math.min to clamp left position so dropdown never goes off the right edge of the screen

Files Changed

  • apps/web/src/components/actions/actions-list.tsx

Screenshots

Type Before After
Desktop
Mobile

@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 29, 2026

@AbhiVarde is attempting to deploy a commit to the better-auth Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant