braintree-web-drop-in icon indicating copy to clipboard operation
braintree-web-drop-in copied to clipboard

Published 20 hours ago • verified publisher icon braintree

UI: Fields and Errors overflow and overlap when stacked (on small displays)

Open J-Gonzalez opened this issue 4 years ago • 2 comments

General information

  • SDK/Library version: 1.24.0
  • Environment: N/A
  • Browser and OS: Chrome Web, Chrome + Pixel2, iPhone

Issue description

When the drop-in UI is presented on small screens and all fields stack, fields and error messages overflow when errors are presented. I've copied the Braintree Codepen to reproduce (using a different sandbox authorization) so that all fields (postal, cvv, cardholder name ) are showing:

https://codepen.io/jgonzlez722/pen/oNxPaWB image

This issue was sort of documented here: https://github.com/braintree/braintree-web-drop-in/issues/537#issuecomment-519258506 but I didn't see a Github issue just for this UI/overflow issue

J-Gonzalez avatar Sep 17 '20 21:09 J-Gonzalez

Thanks for the report, you're right that it's related to #537 but should be a distinct issue. (the core of 537 will be solved with a recent PR)

crookedneighbor avatar Sep 17 '20 21:09 crookedneighbor

Can confirm that the problem still persists on smaller screens.

IP-Developer avatar Apr 16 '21 12:04 IP-Developer

Screenshot 2023-11-29 at 11 40 48 AM

Closing this issue out as it looks like some of the CSS/UI changes we've made since this was reported have solved this issue.

jplukarski avatar Nov 29 '23 17:11 jplukarski