fix(GenericMenu): restore scroll on dropdown-menu panels - #1155
Merged
Conversation
Long dropdown-menu-type GenericMenu panels (e.g. the org switcher's organization list) stopped scrolling: the panel clips overflow instead of scrolling, so items past the visible area are inaccessible. Root cause: Dropdown.module.css's `.dropdown-menu-content` sets `overflow-y: auto` specifically to override the base panel's `overflow: hidden` (`.generic-menu-panel` in GenericMenu.module.css). Both rules have equal specificity, so which one wins depends on which stylesheet is registered last. The css-colocate build's `insertAtTop` (plugins/css-colocate/import-inject.ts) injects each file's own CSS import at the very top of its own JS module, so Dropdown's stylesheet ends up registered *before* GenericMenu's - inverting the intended override order and letting `overflow: hidden` win. Fix: move the scroll override onto `.generic-menu-panel_type_dropdown-menu` in GenericMenu.module.css itself, after the base rule in the same stylesheet, so it can never lose to cross-file injection order. This also covers any consumer that renders GenericMenuPanel type="dropdown-menu" directly, without going through Dropdown.Content. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DimTHLZxKnUUizAT3kLFoR
🦋 Changeset detectedLatest commit: 6f99b3d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
DreaminDani
reviewed
Jul 30, 2026
Condense the overflow-y override comment to a single line capturing the essential why, per @DreaminDani's review. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DimTHLZxKnUUizAT3kLFoR
Contributor
Storybook Preview Deployed✅ Preview URL: https://click-3mmrafx34-clickhouse.vercel.app Built from commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why?
Long
dropdown-menu-typeGenericMenupanels stopped scrolling — e.g. the org switcher's organization list: the panel clips overflowing content instead of scrolling, so items past the visible area are inaccessible.Before: panel has
overflow: hiddenwith no effective scroll override → items past the available height are cut off and unreachable.After: the panel scrolls (
overflow-y: auto) once content exceeds--radix-dropdown-menu-content-available-height, same as before the regression.Root cause:
Dropdown.module.css's.dropdown-menu-contentalready declaresoverflow-y: autospecifically to override the base panel'soverflow: hidden(.generic-menu-panelinsrc/components/GenericMenu/GenericMenu.module.css, line 5). Both rules have equal specificity (single class selectors), and everything is wrapped in one@layer clickui(seeplugins/css-colocate/postcss-clickui-layers.ts), so within that layer the rule registered last wins.The css-colocate build's
insertAtTophelper (plugins/css-colocate/import-inject.ts) unconditionally injects each file's own colocated CSSimportat the very top of its own compiled JS module — before that module's other imports, including the one that pulls inGenericMenuPanelfromGenericMenu. That meansDropdown.cssends up registered beforeGenericMenu.cssin the build output, inverting the intended override order: the base'soverflow: hidden(declared later) beats Dropdown'soverflow-y: auto(declared earlier), so the panel never scrolls.Confirmed by building the package and inspecting
dist/esm/components/Dropdown/index.js—import "./Dropdown.css";is literally the first line, ahead of the import that pulls inGenericMenu.This is a regression introduced by #1097 (styled-components → CSS Modules migration for the GenericMenu cluster): previously,
DropdownMenuContent = styled(GenericMenuPanel)guaranteed the override styles were registered after the base by JS module evaluation order; CSS Modules colocation doesn't carry that same guarantee.How?
src/components/GenericMenu/GenericMenu.module.css: addedoverflow-y: auto;to.generic-menu-panel_type_dropdown-menu— the same stylesheet, after the base.generic-menu-panelrule, so the override can never lose to cross-file injection order. This also covers any consumer that rendersGenericMenuPanel type="dropdown-menu"directly, without going throughDropdown.Content.Dropdown.module.css's existing.dropdown-menu-content { overflow-y: auto; }in place (now redundant but harmless) to keep the diff minimal.Tickets?
Contribution checklist?
buildcommand runs locally (vite buildsucceeds; verified the fix in the builtdist/esmoutput)Security checklist?
dangerouslySetInnerHTMLNotes for reviewers
yarn typecheckandyarn lint:csspass;yarn vitest run src/components/GenericMenu src/components/Dropdownpasses (16/16).tests/overlays/genericmenu.spec.ts). The existing Dropdown/GenericMenu stories used by that suite only render a handful of items that fit within the available height, sooverflow-y: autovsoverflow: hiddenshouldn't produce any visible pixel diff there (no scrollbar renders unless content actually overflows) — but a reviewer/CI should still confirm the snapshots are unaffected.GenericMenuPanel type="dropdown-menu"regardless of which wrapper the consumer uses.Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Generated by Claude Code