-
Notifications
You must be signed in to change notification settings - Fork 78
Open
Labels
area:uxUI / UX issue.UI / UX issue.platform:webWeb-specific issueWeb-specific issuetype:fixFix features that are not workingFix features that are not working
Description
Description
After PR #5356 migrated the Signup modal from Lit-Element to React, three visual/functional issues were identified.
Problems
1. Incorrect Font Size
- Form labels display with different font sizes compared to the previous Lit version
- Shadow DOM CSS property inheritance may cause Lit parent styles to leak into the React component
- Fix: Set explicit
fontSizeon BAIModal body to prevent inheritance issues
2. No Gap Between Footer Buttons
- Cancel and Signup buttons in the modal footer are touching each other with no spacing
- Caused by
BAIFlexhaving a defaultgapof0 - Fix: Add
gap="sm"toBAIFlexin the footer
3. React Modal Click Events Not Working
- BAIModal (Ant Design Modal) renders its portal to
document.bodyby default, placing it outside the Shadow DOM StyleProvider container={shadowRoot}injects CSS only inside the Shadow DOM, so styles don't apply to the portal- z-index conflict between Lit's
backend-ai-dialog(z-index: 1001) and BAIModal (z-index: 1001) - Fix: Add
getContainer={false}to all modals to render inline within the Shadow DOM
Files to Modify
react/src/components/SignupModal.tsxreact/src/components/TermsOfServiceModal.tsxreact/src/components/PrivacyPolicyModal.tsx
Related PR
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
area:uxUI / UX issue.UI / UX issue.platform:webWeb-specific issueWeb-specific issuetype:fixFix features that are not workingFix features that are not working