🔧 fix+chore: Resolve Overflow in Settings Modal & Upgrade to Headless UI 2.0 #2661
Conversation
This file contains 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
techwithanirudh
changed the title
|
@danny-avila Could you please review this P.R? |
techwithanirudh
changed the title
|
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 |
…new/fix/settings-menu
|
@danny-avila Could you review this P.R? The issue with hanging tests in HeadlessUI seems to have been resolved by this pull request: HeadlessUI PR #3357. As a result, the tests are now passing. |
danny-avila
approved these changes
Jul 10, 2024
danny-avila
added a commit
that referenced
this pull request
Aug 5, 2024
… UI 2.0 (#2661) * fix: dropdown overflow * fix: make dropdown work on mobile * feat: update headlessui to 2.0 and use portal * feat: rewrite modal using headlessui * fix: applying of maxHeight * fix: optimize backdrop for dark mode * fix: rendering dropdown width * feat: match small screen layout to radix-ui dialog * revert: mobile modifications * fix: modal animations * fix: z-index * chore: Migrate from HeadlessUI 1.0 to 2.0 * fix: h2 nesting * fix: use lighter border for PopoverButtons * feat: Move modal to the top if using a small screen * fix: mobile position * fix: frontend tests * feat: use row layout in mobile instead of col * fix: remove config path from tsconfig * fix: fix dropdown tests (gpt4o ftw!) * feat: Upgrade to latest headlessui version * fix:test1 * fix: ThemeSelector test * fix: re-add speech tab * style: use pl and pr-3 * fix: speech tab dropdowns * style: use maxHeight for language * feat: convert DropdownNoState to v2.0 * fix: use v2 params for voiceDropdown * style: reduce maxHeight for VoiceDropdown and set fixed width * chore: rebuild package-lock * style(fix): copy over the same styles for the settingsTab * style(fix): use -top-1 for speech tabs * style(fix): use max-w-[400px] --------- Co-authored-by: Danny Avila <danny@librechat.ai>
kenshinsamue
pushed a commit
to intelequia/LibreChat
that referenced
this pull request
Sep 17, 2024
… UI 2.0 (danny-avila#2661) * fix: dropdown overflow * fix: make dropdown work on mobile * feat: update headlessui to 2.0 and use portal * feat: rewrite modal using headlessui * fix: applying of maxHeight * fix: optimize backdrop for dark mode * fix: rendering dropdown width * feat: match small screen layout to radix-ui dialog * revert: mobile modifications * fix: modal animations * fix: z-index * chore: Migrate from HeadlessUI 1.0 to 2.0 * fix: h2 nesting * fix: use lighter border for PopoverButtons * feat: Move modal to the top if using a small screen * fix: mobile position * fix: frontend tests * feat: use row layout in mobile instead of col * fix: remove config path from tsconfig * fix: fix dropdown tests (gpt4o ftw!) * feat: Upgrade to latest headlessui version * fix:test1 * fix: ThemeSelector test * fix: re-add speech tab * style: use pl and pr-3 * fix: speech tab dropdowns * style: use maxHeight for language * feat: convert DropdownNoState to v2.0 * fix: use v2 params for voiceDropdown * style: reduce maxHeight for VoiceDropdown and set fixed width * chore: rebuild package-lock * style(fix): copy over the same styles for the settingsTab * style(fix): use -top-1 for speech tabs * style(fix): use max-w-[400px] --------- Co-authored-by: Danny Avila <danny@librechat.ai>
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.
Summary
This pull request resolves a visibility issue within the settings modal where dropdown options were obscured due to the
overflow: autoCSS 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.