show modal as bottom sheet for mobile

[lionellbriones]

Jira Link

https://consensyssoftware.atlassian.net/browse/EMBED-445

Description

Makes the modal render as a full-width slide-up bottom sheet on small screens and revert to a centered, fixed-width dialog at the xs breakpoint and above. Also smooths the enter/exit transition so content no longer disappears abruptly as the modal animates closed.

Changes

• Modal.tsx — responsive bottom sheet
  • center placement anchors to the bottom (items-end) on small screens and centers (xs:items-center) at xs+
  • Modal panel is full-width on mobile (w-full) and switches to a fixed xs:w-[393px] at xs+ (previously two width tiers of 356px / 393px)
  • Rounds only the top corners on mobile (rounded-t-*) and all corners at xs+, matching a bottom-sheet look
  • Shadow steps from shadow-xl on mobile to xs:shadow-lg at xs+
• Modal.tsx — enter/exit animation
  • Adds an isMounted state so the modal stays mounted through a 500ms slide-down/fade-out before unmounting
  • Switches the animation to combined translate-y-full + opacity-0 transitions with ease-out
  • Preserves the last non-empty children in renderedChildren so content remains visible during the exit animation instead of vanishing when the parent clears it
  • Cleans up pending timers on effect teardown to avoid stray state updates

How has this been tested?

Screenshots (if appropriate)

Before

web3auth-modal-responsive-animation.mov

After

Desktop and mobile modal

web3auth-modal-responsive-animation-after.mov

Bottom sheet login

Screen.Recording.2026-07-21.at.11.03.04.PM.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the code style of this project. (run lint)
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

---

Note

^{Cursor Bugbot is generating a summary for commit fd61cbd. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web3auth-web	Ready	Preview, Comment	Jul 21, 2026 3:05pm

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit fd61cbd. Configure here.}