Skip to content

fix(dashboard): allow scrolling in CustomSelect and project dropdown menus - #653

Open
chbndrhnns wants to merge 1 commit into
oblien:mainfrom
chbndrhnns:fix/dropdown-scroll
Open

fix(dashboard): allow scrolling in CustomSelect and project dropdown menus#653
chbndrhnns wants to merge 1 commit into
oblien:mainfrom
chbndrhnns:fix/dropdown-scroll

Conversation

@chbndrhnns

@chbndrhnns chbndrhnns commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Fixes #652

Problem

When connecting a Supabase database to a project via the "Use in a project" modal (UseInProjectModal), or when using CustomSelect / ProjectFilter with a long list of items, the dropdown list cannot be scrolled and gets clipped.

Cause

In CustomSelect.tsx, the portal menu container had overflow-hidden and maxHeight, but was a standard block container without flex layout. The child options container used max-h-full (max-height: 100%), which evaluates to none against an indefinite parent height: auto. The child expanded to the full content height of all options and never overflowed its own box, while the parent's overflow-hidden and maxHeight clipped the menu without enabling scrollbars.

In ProjectFilter.tsx, trailing overflow-hidden was overriding overflow-y-auto.

Fix

  • Added flex flex-col to the outer container in CustomSelect.tsx.
  • Changed the inner options list to min-h-0 flex-1 overflow-y-auto so flexbox properly constrains the options container to the available maxHeight space, enabling scrolling.
  • Removed conflicting overflow-hidden from ProjectFilter.tsx.
  • Added render regression test for CustomSelect.

@Hydralerne

Copy link
Copy Markdown
Member

I really appreciate your amazing help, but please don't abuse the tests, its simple component fix no need for 3 files of tests, please cleanup the tests

Outer portal container lacked flex layout while inner container used
max-h-full, causing the child to expand to full content height without
scrolling and getting clipped by parent overflow-hidden at maxHeight.
Adding flex-col on the outer container and min-h-0 flex-1 on the inner
container allows flexbox to properly constrain the scrollable list.
@chbndrhnns
chbndrhnns force-pushed the fix/dropdown-scroll branch from 20f18e4 to 57a2f8c Compare August 21, 2026 06:17
@chbndrhnns

Copy link
Copy Markdown
Contributor Author

I kept a single regression test.

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.

Dropdown to connect a Supabase DB to a project does not scroll

2 participants