-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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+chore: Resolve Overflow in Settings Modal & Upgrade to Headless UI 2.0 #2661
base: main
Are you sure you want to change the base?
🔧 fix+chore: Resolve Overflow in Settings Modal & Upgrade to Headless UI 2.0 #2661
Conversation
@danny-avila Could you please review this P.R? |
Can you potentially address the failing frontend tests? https://greenonsoftware.com/articles/testing/testing-and-mocking-resize-observer-in-java-script/ |
@danny-avila Could you help me on this? |
seems to be an issue with headless-ui: |
if the motivation is a portal needed, radix ui has this: https://www.radix-ui.com/primitives/docs/utilities/portal |
Closed, due to HeadlessUI |
Summary
This pull request resolves a visibility issue within the settings modal where dropdown options were obscured due to the
overflow: auto
CSS property. The migration to Headless UI 2.0, with its new portal feature, effectively counters this problem by rendering dropdown elements outside their bounding container, ensuring they display fully.Detailed Description
Previously, the settings modal was implemented using Radix UI, which did not support the necessary features to overcome the overflow limitations that were causing dropdown elements to be clipped. The update to Headless UI 2.0 brings a solution through the use of portals, which manage overflow issues by rendering components in a separate DOM node outside of the CSS overflow context.
This update required the settings modal to be rewritten in Headless UI to take advantage of the new portal feature. Furthermore, due to breaking changes introduced by the upgrade to Headless UI 2.0, other parts of the application that utilized Headless UI 1.0 also needed updates to maintain functionality and coherence across the board.
Change Type
Testing
N/A
Test Configuration:
N/A
Checklist
Please delete any irrelevant options.