Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix modal overflow on small viewports #300

Open
QAComet opened this issue Apr 3, 2024 · 0 comments
Open

Fix modal overflow on small viewports #300

QAComet opened this issue Apr 3, 2024 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@QAComet
Copy link
Contributor

QAComet commented Apr 3, 2024

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

  1. Login on /us/account
  2. Navigate to the addresses page on /us/account/addresses
  3. Click the "New address" button
  4. 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.
@VariableVic VariableVic self-assigned this Apr 5, 2024
@VariableVic VariableVic added the bug Something isn't working label Apr 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants