feat(data-weaver): Import/export menus are made responsive on narrow screens. - #456
Merged
Merged
Conversation
Import/export menus are made responsive on narrow screens. Keeps floating menus inside the viewport by clamping their horizontal position and max-height based on the trigger and window bounds. Scrolling now happens in a dedicated inner container so rounded menus keep their scrollbar clipped inside the container as per other componetns do.
pablonoel
requested review from
beets,
miss-o-soup and
nick-nlb
as code owners
August 31, 2026 20:46
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request improves the responsiveness and positioning of the menu component on narrow screens by dynamically clamping its position and height using a useLayoutEffect hook, wrapping its children in a scrollable container, and updating the export and import menu styles to use responsive widths. Feedback on these changes suggests optimizing the resize event handler in the useLayoutEffect hook with requestAnimationFrame to avoid layout thrashing, and removing redundant flex-shrink: 0 properties from the header and content containers of the export and import menus since their parent is no longer a flex container.
Use requestAnimationFrame to debounce the menu resize handler in MenuWithPrefersMotion and cancel the pending frame on cleanup to prevent layout thrash and stale callbacks. Remove redundant `flex-shrink: 0` rules from export/import menu styles so header and content containers can shrink correctly.
pablonoel
changed the title
pablonoel
changed the title
beets
approved these changes
Aug 31, 2026
Import ReactNode and reformat React imports; cast children as ReactNode in Menu to satisfy TypeScript typing. This adjusts the import block and adds an explicit children cast in dataweaver/apps/web/src/components/elements/menu.tsx to prevent type errors during compilation.
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
2 participants
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.
Overview
Import/export menus are made responsive on narrow screens.
Changes Made
Scrolling now happens in a dedicated inner container so rounded menus keep their scrollbar clipped inside the container as per other components do.
Keeps floating menus inside the viewport by clamping their horizontal position and max-height based on the trigger and window bounds.
Testing Done
Describe the steps you took to test these changes (please also list commands ran if possible).
Checklist
Note: Only Maintainers can approve and merge PRs. Expected initial review time: 3 business days.