Add ResponsiveModal for improved mobile experience

[impruthvi]

Responsive Modal Implementation

Summary

Implemented a ResponsiveModal component that intelligently switches between a Dialog on desktop and a Drawer on mobile devices, improving the user experience across different device sizes.

Changes

• Replaced standard Dialog component with ResponsiveModal in DeleteUser component
• Added proper form reset functionality when modal is closed via any method
• Optimized event handlers with useCallback for better performance
• Ensured consistent user experience across mobile and desktop views

Testing

• Tested on mobile devices to verify drawer functionality
• Tested on desktop to verify dialog functionality
• Verified form reset works when closing via X button, Cancel button, or clicking outside

Future Improvements

• If state persistence is needed (e.g., keeping the modal open on page refresh), we can integrate with nuqs for URL-based state management

Video

Recording.2025-02-27.221821.mp4

[tnylea]

Looks really cool! I'll discuss this with @taylorotwell if we want to add this drawer component to the starter kit.

Tested out and it looks great 👍

[impruthvi]

Thanks so much! 🙌 Glad to hear it worked well in testing.

If you and @taylorotwell decide to include this in the starter kit, I’d be happy to refine it further or make any adjustments needed to fit the overall design approach.

Appreciate the review — looking forward to the next steps!

[johntrickett86]

@tnylea This would be great. It's something that I have been adding manually when creating a new project with the starter kit. Makes the mobile experience much better.

[tnylea]

Great! I really like it. Approving for merge and I'll let Taylor make the final decision.

I feel that this provides a better UX 😊