From 702765d83dc332c4d274e840568d27508cf5ce55 Mon Sep 17 00:00:00 2001 From: bc-bryan Date: Wed, 1 Jul 2026 17:10:22 +1000 Subject: [PATCH 1/7] feat(returns): ORDERS-7771 tighten spacing on mobile and tablet viewports --- .../components/stencil/account/_account.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/assets/scss/components/stencil/account/_account.scss b/assets/scss/components/stencil/account/_account.scss index 5e2f2fff3d..519cfb94a0 100644 --- a/assets/scss/components/stencil/account/_account.scss +++ b/assets/scss/components/stencil/account/_account.scss @@ -57,9 +57,13 @@ $account-backorder-textColor: #757575; align-items: center; display: flex; flex-wrap: wrap; - gap: spacing("single"); + gap: spacing("half"); justify-content: space-between; margin-bottom: spacing("single"); + + .button { + margin-left: auto; + } } .account-listItem-summary-main { @@ -72,10 +76,12 @@ $account-backorder-textColor: #757575; .account-product-title { margin: 0; + min-width:0; } .account-orderStatus-label { margin: 0; + min-width:0; } } @@ -148,6 +154,13 @@ $account-backorder-textColor: #757575; margin: 0 0 spacing("eighth"); text-transform: inherit; + margin: 0 0 spacing("quarter"); + font-size: fontSize("smallest"); + + @include breakpoint("medium") { + font-size: fontSize("smaller"); + } + > a { text-decoration: none; } @@ -247,7 +260,7 @@ $account-backorder-textColor: #757575; color: stencilColor("color-textSecondary"); font-family: fontFamily("sans"); font-size: fontSize("tiny"); - margin: 0 0 spacing("quarter"); + margin: 0 0 spacing("eighth"); } From 87f3cd3c761144e98359010484230496b2b5b096 Mon Sep 17 00:00:00 2001 From: bc-bryan Date: Wed, 1 Jul 2026 19:13:54 +1000 Subject: [PATCH 2/7] feat(returns): ORDERS-7771 update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e6d212102..2796841a55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Add mobile and tablet responsiveness for returns list page (ORDERS-7771) - Add return details page (ORDERS-7751) - Add new create-return page [#2669](https://github.com/bigcommerce/cornerstone/pull/2669) - Validate picklist option `available_to_sell` on PDP so Add to Cart is disabled and a "maximum purchasable quantity for {picklist} is {qty}" error is shown when the requested quantity exceeds a selected picklist item's stock, even when the main product still has enough stock [#2684](https://github.com/bigcommerce/cornerstone/pull/2684) From 4dca697867478a70ba8b425124987391d8b79b58 Mon Sep 17 00:00:00 2001 From: bc-bryan Date: Thu, 2 Jul 2026 09:39:22 +1000 Subject: [PATCH 3/7] feat(returns): ORDERS-7771 scope shared account css changes to returns list only --- .../components/stencil/account/_account.scss | 70 +++++++++++++++---- .../components/account/returns-list-v2.html | 16 ++--- 2 files changed, 65 insertions(+), 21 deletions(-) diff --git a/assets/scss/components/stencil/account/_account.scss b/assets/scss/components/stencil/account/_account.scss index 519cfb94a0..45d090c62d 100644 --- a/assets/scss/components/stencil/account/_account.scss +++ b/assets/scss/components/stencil/account/_account.scss @@ -54,27 +54,31 @@ $account-backorder-textColor: #757575; } .account-listItem-summary { - align-items: center; + align-items: start; display: flex; flex-wrap: wrap; gap: spacing("half"); justify-content: space-between; - margin-bottom: spacing("single"); + margin-bottom: spacing("half"); + + @include breakpoint("medium") { + margin-bottom: spacing("full"); + } .button { - margin-left: auto; + margin: 0; } } .account-listItem-summary-main { - align-items: center; + align-items:start; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: spacing("half"); min-width: 0; - .account-product-title { + .account-returnsList-title { margin: 0; min-width:0; } @@ -153,13 +157,6 @@ $account-backorder-textColor: #757575; .account-product-title { margin: 0 0 spacing("eighth"); text-transform: inherit; - - margin: 0 0 spacing("quarter"); - font-size: fontSize("smallest"); - - @include breakpoint("medium") { - font-size: fontSize("smaller"); - } > a { text-decoration: none; @@ -260,7 +257,7 @@ $account-backorder-textColor: #757575; color: stencilColor("color-textSecondary"); font-family: fontFamily("sans"); font-size: fontSize("tiny"); - margin: 0 0 spacing("eighth"); + margin: 0 0 spacing("quarter"); } @@ -518,3 +515,50 @@ $account-backorder-textColor: #757575; .account-downloadsItem-availability { color: stencilColor("color-textSecondary"); } + + +// Returns List +// ----------------------------------------------------------------------------- + +.account-returnsList-title { + margin: 0 0 spacing("eighth"); + text-transform: inherit; + font-size: fontSize("smallest"); + + @include breakpoint("medium") { + font-size: fontSize("smaller"); + } + + > a { + text-decoration: none; + } + + + .definitionList { + margin-top: spacing("half"); + } +} + +.account-returnsList-details { + display: flex; + flex-direction: row; + gap: spacing("double") +} + +.account-returnsList-detail { + + .account-returnsList-detail { + margin-top: spacing("base"); + + @include breakpoint("small") { + margin-top: 0; + } + } +} + +.account-returnsList-detail-heading { + color: stencilColor("color-textSecondary"); + font-family: fontFamily("sans"); + font-size: fontSize("tiny"); + margin: 0 0 spacing("quarter"); + margin: 0 0 spacing("eighth"); +} + diff --git a/templates/components/account/returns-list-v2.html b/templates/components/account/returns-list-v2.html index 2f5ccf1cfa..e183801915 100644 --- a/templates/components/account/returns-list-v2.html +++ b/templates/components/account/returns-list-v2.html @@ -5,7 +5,7 @@