Skip to content

fix: Fix Popover Width and Error Field Spacing#1815

Merged
buzzamus merged 4 commits into
card-fields-featurefrom
fix-cardFields-width
Jun 9, 2026
Merged

fix: Fix Popover Width and Error Field Spacing#1815
buzzamus merged 4 commits into
card-fields-featurefrom
fix-cardFields-width

Conversation

@buzzamus

@buzzamus buzzamus commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Summary of changes

  • The CVV Help Popover had a Width of 261 and it needed to be adjusted to allow flexible widths on different sized devices. This was changed to allow the popover to have a floor by passing in a containerWidth.
  • This PR also allows the HStack for the expiry and CVV row be more flexible for different devices sizes by switching to applying a threshold to the VStack.
  • Fixes error that made the CVV and Expiration Date fields vertically offset when there was an error on one field, but not the other

Screenshots:
iPhone SE from Preview (raw CardField with no additional styling-takes up entire width and allows merchants to control desired width with the container view)

Screenshot 2026-06-08 at 10 40 43 AM

iphone SE from Demo view (width padding like a merchant may add)

Simulator Screenshot - iPhone SE (3rd generation) - 2026-06-08 at 10 42 00

iPhone 17
Simulator Screenshot - iPhone 17 - 2026-06-08 at 10 42 33

iPad Pro 13inch
Simulator Screenshot - iPad Pro 13-inch (M5) - 2026-06-08 at 10 43 09

AI Usage

Which AI Agent Was Used?

  • Copilot
  • Claude
  • Other (Type Name Here)

How was AI used?
Used to determine pros and cons of specific ways of fixing width issue as well as make changes for adding in the passing of containerWidth

Estimated AI Code Contribution

  • less than 30%
  • 30 - 60%
  • 60 - 100%

Checklist

  • Added a changelog entry
  • Tested and confirmed payment flows affected by this change are functioning as expected

Authors

List GitHub usernames for everyone who contributed to this pull request.

@buzzamus buzzamus requested a review from a team as a code owner June 4, 2026 20:50

@jaxdesmarais jaxdesmarais left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you able to a some screenshots of a few different device widths to the PR description?

Comment thread Sources/BraintreeUIComponents/CardFields/CVVField/CVVFieldView.swift Outdated
@State private var containerWidth: CGFloat = CardFieldsConstants.defaultContainerWidth
private var onValidityChange: ((Bool, @escaping () -> Void) -> Void)?

private var useHorizontalLayout: Bool { containerWidth >= CardFieldsConstants.horizontalLayoutThreshold }

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we newline this

@agedd agedd left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@buzzamus buzzamus merged commit 7492740 into card-fields-feature Jun 9, 2026
14 of 15 checks passed
@buzzamus buzzamus deleted the fix-cardFields-width branch June 9, 2026 19:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants