Skip to content

feat(checkout): CHECKOUT-10307 fix the minor ui-ux issues for enhanced theme - #3277

Open
richapatel1510 wants to merge 3 commits into
masterfrom
minor-ui-ux-changes
Open

feat(checkout): CHECKOUT-10307 fix the minor ui-ux issues for enhanced theme#3277
richapatel1510 wants to merge 3 commits into
masterfrom
minor-ui-ux-changes

Conversation

@richapatel1510

@richapatel1510 richapatel1510 commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

What/Why?

  • center align the step title vertically when the step is empty.
  • Fix the empty white space at the bottom of the page when steps are collapsed
  • Fix the extra spacing between login customer header and login form.
  • Apply fallback color for selected checklist item body.

Rollout/Rollback

Rever this PR.

Testing

  • CI checks
  • Manual testing

BEFORE
Screenshot 2026-08-25 at 5 38 35 pm
Screenshot 2026-08-25 at 5 38 44 pm
Screenshot 2026-08-25 at 5 38 56 pm
Screenshot 2026-08-25 at 5 39 07 pm
Screenshot 2026-08-25 at 5 39 43 pm

AFTER
Screenshot 2026-08-25 at 5 33 36 pm
Screenshot 2026-08-25 at 5 36 07 pm
Screenshot 2026-08-25 at 5 37 41 pm
Screenshot 2026-08-25 at 5 56 31 pm


Note

Low Risk
SCSS-only checkout UI tweaks for enhanced theme v1 with no changes to business logic, APIs, or data handling.

Overview
This PR tightens enhanced theme v1 checkout layout and spacing so collapsed steps and short content don’t leave awkward gaps.

The checkout page is stretched to the viewport bottom via flex on body when #checkout-page-container.enhancedThemeV1 is present (scoped so modals that also use the theme class aren’t affected). Step headers drop default bottom padding except on non-last headers, so collapsed step titles stay vertically centered without extra space on the active step. Customer login loses the extra top margin above the returning-customer block. Selected checklist items get a light highlight background; payment provider header rules move into a dedicated _paymentProvider.scss (including zero bottom margin on the sub-header name).

Reviewed by Cursor Bugbot for commit 4785143. Bugbot is set up for automated code reviews on this repo. Configure here.

@richapatel1510
richapatel1510 requested a review from a team as a code owner August 25, 2026 07:42
$element-border-radius: remCalc(12px);

// Stretch the checkout page container to the bottom of the viewport;
// modals also carry .enhancedThemeV1, hence the container id

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.

Do we need these comments? Feel the css is self explanatory.

@@ -0,0 +1,12 @@
// Payment provider title

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.

This I think can be removed.

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.

2 participants