Skip to content

fix: Signup modal visual and interaction bugs after React migration #5360

@inureyes

Description

@inureyes

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 fontSize on 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 BAIFlex having a default gap of 0
  • Fix: Add gap="sm" to BAIFlex in the footer

3. React Modal Click Events Not Working

  • BAIModal (Ant Design Modal) renders its portal to document.body by 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.tsx
  • react/src/components/TermsOfServiceModal.tsx
  • react/src/components/PrivacyPolicyModal.tsx

Related PR

Metadata

Metadata

Assignees

Labels

area:uxUI / UX issue.platform:webWeb-specific issuetype:fixFix features that are not working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions