From 873cb375a5cd4b85e50fb62c50a62ff212522c64 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Fri, 15 May 2026 11:25:28 -0400
Subject: [PATCH] style: empty-cart buttons now match the right column's full
 width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 make_post_sell/static/css/common.css   | 9 +++------
 make_post_sell/templates/styleguide.j2 | 9 +++++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index f6729a2..249a54e 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -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 {
diff --git a/make_post_sell/templates/styleguide.j2 b/make_post_sell/templates/styleguide.j2
index f215fbf..f64be1b 100644
--- a/make_post_sell/templates/styleguide.j2
+++ b/make_post_sell/templates/styleguide.j2
@@ -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>