🔧 fix+chore: Resolve Overflow in Settings Modal & Upgrade to Headless UI 2.0

[techwithanirudh]

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

• Bug fix (non-breaking change which fixes an issue)

Testing

N/A

Test Configuration:

N/A

Checklist

Please delete any irrelevant options.

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• My changes do not introduce new warnings
• Local unit tests pass with my changes

[techwithanirudh]

@danny-avila Could you please review this P.R?

[danny-avila]

Can you potentially address the failing frontend tests?

https://greenonsoftware.com/articles/testing/testing-and-mocking-resize-observer-in-java-script/

[techwithanirudh]

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?

[danny-avila]

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:

tailwindlabs/headlessui#2832

[danny-avila]

if the motivation is a portal needed, radix ui has this:

https://www.radix-ui.com/primitives/docs/utilities/portal
https://www.radix-ui.com/primitives/docs/components/dialog#portal
https://www.radix-ui.com/primitives/docs/components/dropdown-menu#portal

[techwithanirudh]

Closed, due to HeadlessUI