fix(account): BACK-699 refine backorder layout and colors on order details#2677
Open
bc-apostoliuk wants to merge 2 commits into
Open
fix(account): BACK-699 refine backorder layout and colors on order details#2677bc-apostoliuk wants to merge 2 commits into
bc-apostoliuk wants to merge 2 commits into
Conversation
…tails Top-align all product row cells (checkbox, image, body) so rows stay readable whether or not backorder text is present, remove the extra vertical gap between backorder rows, and use #757575 for all backorder text (qty ready to ship, qty backordered, backorder message, and the shipping expectation message). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
animesh1987
reviewed
Jun 11, 2026
…variable Reviewer asked whether a color token could be used instead of a literal hex. No Citadel greys token matches the design-specified #757575 (nearest is the bluish #798289), so the value is kept but defined once as $account-backorder-textColor to avoid the repeated magic number. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
animesh1987
approved these changes
Jun 11, 2026
bc-yevhenii-buliuk
approved these changes
Jun 11, 2026
| and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). | ||
|
|
||
| ## Draft | ||
| - Refine backorder display on the account order details page: top-align all product row cells (checkbox, image, body) so rows stay readable with or without backorder text, remove the extra vertical gap between backorder rows, and use `#757575` for all backorder text (qty ready to ship, qty backordered, backorder message, and shipping expectation message) |
Contributor
There was a problem hiding this comment.
Could you create a more concise description here? Also add please the link in the end.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Refines the backorder display on the account → order details page (
templates/components/account/order-contents.html+templates/pages/account/orders/details.html), addressing the font/layout issues called out in BACK-699. All changes are inassets/scss/components/stencil/account/_account.scss..account-product--alignMiddlelays the checkbox, image figure, and body out as table cells. Previously the checkbox and body werevertical-align: middlewhile the image figure fell back to the default baseline, so the image never lined up with the rest — and once backorder text grew the row height, the misalignment made rows hard to read. All three cells (.account-product-checkItem,.account-product-figure,.account-product-body) are nowvertical-align: top, so every cell top-aligns regardless of simple/complex product or whether backorder text is present..account-product-backorder-promptsdropped itsmargin-bottom: spacing("quarter")(and the now-redundant:last-of-typereset) in favour ofmargin-bottom: 0, so "ready to ship / will be backordered / backorder message" read as one tight group instead of a confusingly loose stack.#757575. Added the colour to.account-product-backorder-prompts(was inheriting the too-dark body text) and changed.account-order-backorder-expectationfromcolor("greys", "light")(#e1e6eb, too light) to#757575. This now covers qty ready to ship, qty backordered, the backorder message, and the shipping expectation message — all per the ticket's spec colour.#757575is not an existing Citadel grey token (nearest are#798289/#acb3be), so the literal hex from the ticket is used in both rules.Requirements
Tickets / Documentation
Screenshots (if appropriate)
Note
Low Risk
Presentation-only SCSS on account order details; no logic, templates, or data handling changes.
Overview
Refines account order details backorder styling in
_account.scss(BACK-699): no template changes.Layout: In
.account-product--alignMiddle, checkbox, image, and body table cells now usevertical-align: topinstead of middle/default so rows stay aligned when backorder copy increases height.Spacing & color:
.account-product-backorder-promptsdrops bottom margin between stacked lines (margin-bottom: 0). Backorder prompts and.account-order-backorder-expectationshare a new$account-backorder-textColor(#757575) so qty ready to ship, backordered qty, messages, and shipping expectation read consistently (replacing inherited body color and overly lightcolor("greys", "light")).CHANGELOG Draft entry documents the same.
Reviewed by Cursor Bugbot for commit 8cfd6f9. Bugbot is set up for automated code reviews on this repo. Configure here.