From 8853a5aa085e972879dc1dca15490b48689380fc Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Mon, 11 May 2026 08:19:18 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20.mps-button=20squished=20on=20<button>?=
 =?UTF-8?q?=20elements=20=E2=80=94=20normalize=20box=20model?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per fox: Add To Cart / Make an offer buttons looked squished (text
crammed at top, little vertical space) while .mps-button on <a>
elements (cart page) looked fine.

Root cause: <button> elements inherit UA-stylesheet line-height and
box-sizing that differ from <a>. The class set padding-top/bottom: 14px
but with the native button line-height the text didn't center properly.

Normalized .mps-button:
- appearance: none (+ -webkit-) — strip native button chrome
- box-sizing: border-box — consistent across <button>/<a>/<input>
- font-family: inherit — buttons default to a different font
- line-height: 1.4 — explicit, was relying on UA "normal"
- padding: 12px 16px (was 14px 0) — symmetric, gives horizontal
  breathing room too
- vertical-align: middle

Now <button class="mps-button">, <a class="mps-button">, and
<input type=submit class="mps-button"> all render the same.

Tests pass (9 in pricing_mode slice).
---
 make_post_sell/static/css/common.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 48f086b..553c392 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -727,22 +727,30 @@ pre, code {
 }
 
 .mps-button {
+    /* Normalize so <button>, <a>, and <input type=submit> with this
+       class render identically — without these, <button> elements
+       inherit UA line-height/box-sizing and render squished. */
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
     border: 2px solid transparent;
     border-radius: var(--radius-sm, 4px);
     color: white;
     background-color: #D4D0C8;
     display: inline-block;
+    font-family: inherit;
     font-size: var(--text-sm, 14px);
     font-weight: var(--weight-bold, bold);
+    line-height: 1.4;
     min-width: 100%;
     margin-top: var(--space-1, 4px);
     margin-bottom: var(--space-1, 4px);
-    padding-top: 14px;
-    padding-bottom: 14px;
+    padding: 12px 16px;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
+    vertical-align: middle;
 }
 
 [data-theme="dark"] .mps-button {