Skip to content

fix(core): keep cart quantity column fixed-width so backorder message wraps#3060

Open
bc-apostoliuk wants to merge 2 commits into
canaryfrom
BACK-684-backorder-message-fixed-column-width
Open

fix(core): keep cart quantity column fixed-width so backorder message wraps#3060
bc-apostoliuk wants to merge 2 commits into
canaryfrom
BACK-684-backorder-message-fixed-column-width

Conversation

@bc-apostoliuk

@bc-apostoliuk bc-apostoliuk commented Jun 23, 2026

Copy link
Copy Markdown

What/Why

BACK-684

In the cart, a backorder/inventory message could extend the width of the quantity column. When a message contained a long unbreakable token, the column (sized with size-min → CSS min-content) grew to fit it, dragging the +/− counter out of its fixed right-aligned position and stretching the message across the row.

Expected behaviour (per ticket)

  • Quantity column should have a fixed width in a fixed position.
  • Backorder message should wrap to the next row when its length exceeds the column width.

How

Apply overflow-wrap: anywhere to the inventory-message <span>s via a direct-child selector on the column container:

- <div className="flex size-min flex-col gap-y-0">
+ <div className="flex size-min flex-col gap-y-0 [&>span]:[overflow-wrap:anywhere]">

Unlike break-words (overflow-wrap: break-word), overflow-wrap: anywhere is counted when computing min-content. This collapses the messages' min-content contribution, so the column width is driven solely by the constant-width counter row — keeping the column fixed in place while long messages wrap onto the next line. The counter's quantity <span> is a grandchild of the container, so it is unaffected by the selector.

Testing

  • eslint passes on the changed file.
  • Rendered a faithful before/after reproduction in headless Chromium: the counter stays anchored in a fixed position and the long token wraps within the column, while normal messages (e.g. "13 will be backordered") remain on single lines.

🤖 Generated with Claude Code

bc-apostoliuk and others added 2 commits June 23, 2026 23:23
… wraps

The cart line-item quantity column used `size-min` (min-content), so a long
unbreakable inventory message token expanded the column, shifting the counter
out of its fixed position and stretching the message across the row.

Apply `overflow-wrap: anywhere` to the inventory-message spans so they no
longer contribute to the column's min-content width. The column width is now
driven solely by the constant-width counter, keeping it fixed in place while
long messages wrap onto the next line.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bc-apostoliuk bc-apostoliuk requested a review from a team as a code owner June 23, 2026 20:24
@changeset-bot

changeset-bot Bot commented Jun 23, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 576fc82

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@bigcommerce/catalyst-core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
catalyst Ready Ready Preview, Comment Jun 23, 2026 8:25pm

Request Review

@github-actions

Copy link
Copy Markdown
Contributor

Bundle Size Report

Comparing against baseline from 98d5b87 (2026-06-23).

No bundle size changes detected.

@github-actions

Copy link
Copy Markdown
Contributor

Unlighthouse Performance Comparison — Vercel

Comparing PR preview deployment Unlighthouse scores vs production Unlighthouse scores.

Summary Score

Aggregate score across all categories as reported by Unlighthouse.

Prod Desktop Prod Mobile Preview Desktop Preview Mobile
Score 90 93 92 95

Category Scores

Category Prod Desktop Prod Mobile Preview Desktop Preview Mobile
Performance 73 89 72 77
Accessibility 95 98 95 98
Best Practices 100 100 100 100
SEO 88 88 88 100

Core Web Vitals

Metric Prod Desktop Prod Mobile Preview Desktop Preview Mobile
LCP 4.8 s 3.8 s 3.9 s 6.5 s
CLS 0.037 0 0.037 0.011
FCP 1.2 s 1.2 s 1.2 s 1.2 s
TBT 0 ms 0 ms 0 ms 0 ms
Max Potential FID 40 ms 50 ms 50 ms 40 ms
Time to Interactive 4.8 s 3.8 s 6.2 s 6.5 s

Full Unlighthouse report →

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