medusajs / nextjs-starter-medusa

A performant frontend ecommerce starter template with Next.js 14 and Medusa.

https://next.medusajs.com/

MIT License

1.78k stars 495 forks source link

Fix modal overflow on small viewports #300

Open QAComet opened 7 months ago

QAComet commented 7 months ago

Description

For modals with larger forms, such as on the add/edit address form, if I shrink my desktops viewport height the form overflows from the modal. This creates an awkward situation where the user may not be able to submit the form, if the viewport height is too small. See the screenshot for how the overflow looks right now

address_modal

Steps to reproduce

Login on /us/account
Navigate to the addresses page on /us/account/addresses
Click the "New address" button
Shrink the viewport height so it is less than 650px

Suggestions for improvement

Add a scrollbar when needed. Wrap the content inside of the modal with a div and style it with overflow-y: auto. Also style the modal outer with overflow: hidden;. This way the rounded corners are preserved.