-
-
Notifications
You must be signed in to change notification settings - Fork 456
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Menu overflows #340
fix: Menu overflows #340
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@matthewlipski, can't we set a max-height to for example 100vh using CSS? won't that solve the problem?
Also, in Floating UI I think this becomes easier: https://floating-ui.com/docs/size
Not really, since this would make the dropdown the same height as the viewport, but in most cases the top of the dropdown is not in the same place as the top of the viewport, so it would still overflow. |
How about also adding a constrained Dropdown height and let the inside elements as overflow scroll? |
Got it. Is the solution at the bottom of this page https://mantine.dev/core/scroll-area/ possible with menus? If so, that would be more of a Mantine-style fix I think
@dukesx you mean a fixed height? |
@YousefED yes exactly. I figure that trying to make it responsive through javascript is just a bottleneck. |
I played around with Also yeah this seems really easy to do with FloatingUI, it's frustrating that Mantine heavily limits the middleware customization (can only set |
Would be nice if we can get rid of the setTimeout somehow. For now, let's add a comment why this "hack" is necessary Looking at the source code, it's possible that in the latest mantine (v7) you can pass a ref to menu.dropdown but for now this PR is ok imo |
While we handle overflows for Tippys and Mantine
Menu.Dropdown
components to some extent (i.e. flipping the position when there's no space), for very small viewports where there's no space an any available position, the element goes beyond the viewport. Unfortunately, this is not something easily fixed with the use ofMenu
props, so this PR adds a new hook which dynamically adjustsmaxHeight
forMenu.Dropdown
components when they're rendered. This hooks is used by almost all UI elements which use aMenu
(slash menu, color picker, and formatting toolbar dropdown).Closes #339