engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

style: empty-cart buttons now match the right column's full width

Browse source 
Previous attempt capped .cart-empty-actions at 320px, which made the
"Let's go shopping!" / "View Saved Carts" pair visibly narrower than
the "Make Cart Active" / "Delete Cart" pair in the right column —
still inconsistent.

Drop the cap and centering so the buttons fill the well exactly like
the right column's cart-action buttons. Both wells now produce the
same button width, one cohesive rhythm down the page.

Styleguide entry updated to match.
This commit is contained in:
russell@unturf.com 2026-05-15 11:25:28 -04:00
parent df65536c17
commit 873cb375a5
No known key found for this signature in database
2 changed files with 8 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

9
make_post_sell/static/css/common.css
View file

@ -1247,12 +1247,11 @@ button.cart-public-button span.lock {
color: white;
}
/* Empty cart state — stacked buttons matching the right column's
full-width treatment so the page reads as one cohesive button rhythm
instead of mixed small + full-width sizes. */
/* Empty cart state — stacked buttons that fill the well so they line up
exactly with the right column's Make Cart Active / Delete Cart pair.
Same button width across both wells = one cohesive button rhythm. */
.cart-empty-state {
display: grid;
justify-items: center;
gap: var(--space-2, 8px);
padding: var(--space-4, 16px) var(--space-3, 12px);
text-align: center;
@ -1267,8 +1266,6 @@ button.cart-public-button span.lock {
.cart-empty-actions {
display: grid;
gap: var(--space-2, 8px);
width: 100%;
max-width: 320px;
margin-top: var(--space-3, 12px);
}
.cart-empty-actions .mps-button {

9
make_post_sell/templates/styleguide.j2
View file

@ -651,11 +651,12 @@ Dark mode: background-image patterns, colored borders</div>
</div>
<div class="sg-code">.cart-empty-state — centered well, stacked heading + hint + actions
.cart-empty-hint — muted one-line subhead
.cart-empty-actions — width-capped grid of full-width stacked buttons
.cart-empty-actions — grid of stacked buttons that fill the well
Primary CTA (green) first, secondary (default gray) below. Same
button size as the right-column saved-cart actions so the page reads
as one cohesive button rhythm instead of mixed small + full-width.</div>
Primary CTA (green) first, secondary (default gray) below. Buttons
fill the well width so they line up exactly with the right-column
Make Cart Active / Delete Cart pair — same button rhythm across
both wells.</div>
</div>
</div>