Skip to content

Checkout: fix mobile visual inconsistencies #106906

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 8 commits into from
Nov 5, 2025
Merged

Checkout: fix mobile visual inconsistencies #106906

merged 8 commits into from
Nov 5, 2025
+15 −15

Conversation

@michaeldcain
Copy link
Member

@michaeldcain michaeldcain commented Nov 4, 2025 •
edited
Loading

Fixes https://linear.app/a8c/issue/SHILL-1269/

Proposed Changes

This addresses some of the feedback for Checkout from p58i-od0-p2

  • makes input color consistent
  • fixes vertical alignment of some icons
  • fixes grid alignment for fields and buttons
  • fixes alignment, padding, and border radius for checkout summary
Before After
Screenshot 2025-11-04 at 09 47 01 Screenshot 2025-11-04 at 09 47 29
Screenshot 2025-11-04 at 09 46 13 Screenshot 2025-11-04 at 09 45 54

Testing Instructions

  • Visit Checkout with different cart combinations (plan, plan and domain, emails, siteless, etc.)
  • Verify that things visually look correct on desktop first
  • Use devtools to view different mobile sizes
  • Verify that things still look correct

@michaeldcain michaeldcain self-assigned this Nov 4, 2025
@github-actions
Copy link

github-actions bot commented Nov 4, 2025 •
edited by matticbot
Loading

Calypso Live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-161176
Jetpack Cloud live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-161176&env=jetpack
Automattic for Agencies live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-161176&env=a8c-for-agencies

@michaeldcain michaeldcain force-pushed the fix/checkout-visual-issues branch from 9e5287a to f3f9800 Compare November 4, 2025 15:06
@michaeldcain michaeldcain marked this pull request as ready for review November 4, 2025 15:14
@michaeldcain michaeldcain requested a review from a team as a code owner November 4, 2025 15:14
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 4, 2025
@matticbot
Copy link
Contributor

matticbot commented Nov 4, 2025 •
edited
Loading

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • notifications
  • odyssey-stats
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/checkout-visual-issues on your sandbox.

sirbrillig
sirbrillig approved these changes Nov 4, 2025
View reviewed changes
Copy link
Member

@sirbrillig sirbrillig left a comment

Choose a reason for hiding this comment

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

Looks good!

@michaeldcain michaeldcain merged commit db2c5e5 into trunk Nov 5, 2025
14 checks passed
@michaeldcain michaeldcain deleted the fix/checkout-visual-issues branch November 5, 2025 14:21
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sirbrillig sirbrillig sirbrillig approved these changes

Assignees

@michaeldcain michaeldcain

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@michaeldcain @matticbot @sirbrillig