store: .cart-line name column collapses to 0px at <=390px, overlapping the qty stepper #58

New issue

Closed

opened 2026-08-27 14:30:31 +00:00 by yuris · 0 comments

yuris commented

2026-08-27 14:30:31 +00:00

Owner

Found by Reviewer55r1 while reviewing PR #55. Pre-existing on 55f5d72 — live on the production checkout screen at common phone widths.

The defect

.cart-line in apps/store/app/globals.css:

grid-template-columns: var(--s16) minmax(0, 1fr) auto;

The auto controls column takes max-content, collapsing the name/meta column to 0px at 390 / 375 / 360 / 320px. Measured on a stocked-only line, DOM identical to origin/main, so nothing from #47 is needed to trigger it:

the product name overlaps the − button
Hapus sits on top of the price

The cart is the conversion surface — the screen a buyer uses immediately before sending the WhatsApp order — and 375–390px covers most phones in this market.

Status — likely fixed incidentally

PR #55 fixes this as a side effect of laying out the indent annotation, using a 600px breakpoint. Its reviewer verified across 18 viewports from 320 to 1440: zero overlap, zero overflow, desktop untouched, and judged 600px better-reasoned than the 480px it first suggested.

If #55 landed: this issue stands for the record and to carry a regression test. Verify on production, then close.
If #55 is reverted or stalls: this is a live production defect needing its own fix.

Verification

Render /cart with at least one line at 320, 360, 375, 390, 600px; assert the name/meta column has non-zero width and no two elements overlap.
Test a stocked-only line, not just an indent line — the defect predates the indent annotation and must not be mistaken for a #47 regression.
Worst case is a long product name plus qty stepper plus Hapus, since the collapse is driven by max-content on the controls column.
Confirm overflowX is 0 at every width.

Acceptance

No overlap and no horizontal overflow on /cart from 320px up, on stocked and indent lines, with a long product name; desktop layout unchanged.

Found by `Reviewer55r1` while reviewing PR #55. Pre-existing on `55f5d72` — **live on the production checkout screen at common phone widths.** ## The defect `.cart-line` in `apps/store/app/globals.css`: ```css grid-template-columns: var(--s16) minmax(0, 1fr) auto; ``` The `auto` controls column takes `max-content`, collapsing the name/meta column to **0px** at 390 / 375 / 360 / 320px. Measured on a **stocked-only** line, DOM identical to `origin/main`, so nothing from #47 is needed to trigger it: - the product name overlaps the `−` button - `Hapus` sits on top of the price The cart is the conversion surface — the screen a buyer uses immediately before sending the WhatsApp order — and 375–390px covers most phones in this market. ## Status — likely fixed incidentally **PR #55 fixes this as a side effect** of laying out the indent annotation, using a 600px breakpoint. Its reviewer verified across **18 viewports from 320 to 1440**: zero overlap, zero overflow, desktop untouched, and judged 600px better-reasoned than the 480px it first suggested. - **If #55 landed**: this issue stands for the record and to carry a regression test. Verify on production, then close. - **If #55 is reverted or stalls**: this is a live production defect needing its own fix. ## Verification - Render `/cart` with at least one line at 320, 360, 375, 390, 600px; assert the name/meta column has non-zero width and no two elements overlap. - Test a **stocked-only** line, not just an indent line — the defect predates the indent annotation and must not be mistaken for a #47 regression. - Worst case is a long product name plus qty stepper plus `Hapus`, since the collapse is driven by `max-content` on the controls column. - Confirm `overflowX` is 0 at every width. ## Acceptance No overlap and no horizontal overflow on `/cart` from 320px up, on stocked and indent lines, with a long product name; desktop layout unchanged.

yuris referenced this issue

2026-08-27 19:26:05 +00:00

feat(store): simplify /services and /contact to the approved design #63

yuris referenced this issue from a commit

2026-08-28 01:52:13 +00:00

test(store): pin the card-price cascade and cart-line grid contract (#57, #58)

yuris referenced this issue from a pull request that will close it,

2026-08-28 01:53:47 +00:00

fix(store): card prices lose --ink to .product-card p; pin the cart-line grid (#57, #58) #67

yuris referenced this issue from a commit

2026-08-28 02:01:02 +00:00

test(store): resolve the cascade instead of pattern-matching the sheet (#57, #58)