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

fix: .mps-button back to inline-block — inline-grid broke multi-child buttons

Browse source 
The inline-grid + place-items: center change put each child of a button
into its own grid row. Buttons that hold an icon span + label text (the
windows-95 hamburger: <span>☰</span> + "shop.unturf.com") got the icon
on one line and the label on the next.

.mps-button is now display: inline-block again — multi-child content
flows on one line as expected. The squish fix is retained without grid:
- box-sizing: border-box (normalizes <button> vs <a>)
- padding: 12px 18px (symmetric, generous horizontal — no more text
  jammed against the edge)
- line-height: 1.4 (explicit, not UA "normal")
- min-height: 44px (tap-target floor)
- appearance: none, font-family: inherit

.mps-button-primary likewise back to inline-block with box-sizing,
line-height, text-align: center.

(.edit-card-icon stays inline-grid + place-items: center — it holds a
single glyph, so grid centering is correct there. Still Grid only,
no flex anywhere.)

Tests pass (10 in target slices).
This commit is contained in:
russell@unturf.com 2026-05-11 12:55:14 -04:00
parent 3af81a38e9
commit 2630b78175
No known key found for this signature in database
1 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -728,10 +728,11 @@ pre, code {
.mps-button {
/* Normalize so <button>, <a>, and <input type=submit> with this
class render identically. inline-grid + place-items: center
dead-centers the content regardless of the element's native box
model — <button> content otherwise lays out differently from <a>
and looks squished. (Grid only — no flex, per CLAUDE.md.) */
class render consistently. inline-block (NOT grid) — buttons can
contain multiple inline children (icon span + label text, e.g.
the windows-95 hamburger) which must flow on one line. box-sizing
+ symmetric padding + explicit line-height fix the <button>-vs-<a>
rendering difference that made <button> elements look squished. */
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
@ -739,8 +740,7 @@ pre, code {
border-radius: var(--radius-sm, 4px);
color: white;
background-color: #D4D0C8;
display: inline-grid;
place-items: center;
display: inline-block;
font-family: inherit;
font-size: var(--text-sm, 14px);
font-weight: var(--weight-bold, bold);
@ -749,7 +749,7 @@ pre, code {
min-height: 44px;
margin-top: var(--space-1, 4px);
margin-bottom: var(--space-1, 4px);
padding: 10px 16px;
padding: 12px 18px;
text-align: center;
text-decoration: none;
white-space: nowrap;
@ -1518,13 +1518,15 @@ div.edit-page > section.well2 > form > h3:first-child {
background: var(--color-purple, #9B59B6);
}
/* Primary save action — filled, prominent button. (Grid only.) */
/* Primary save action — filled, prominent button. */
div.edit-page input.mps-submit[value="Save Settings"],
div.edit-page button.mps-submit-primary,
.mps-button-primary {
float: none;
display: inline-grid;
place-items: center;
box-sizing: border-box;
display: inline-block;
line-height: 1.4;
text-align: center;
padding: var(--space-3, 12px) var(--space-6, 24px);
background: var(--color-navy, #5871ad);
color: #fff;