From 5c08be1c30dd56f429bd8fd9f423e30a95d4517a Mon Sep 17 00:00:00 2001 From: martbost Date: Wed, 23 Sep 2026 09:10:50 -0500 Subject: [PATCH] Campaign actions: a centred, even stack with a squarer corner The column is narrow so these buttons stack. Left-aligned pills of different widths read as a ragged edge, and a label that wraps inside a 999px radius becomes a tall oval, which is what "Buy more views" was doing. They are now centred, the same width, and cornered at 10px, so each label sits on one line. Scoped to this table: everything else keeps the pill. The phone card shares a row rather than stacking, as it did before, so that layout is left alone. Co-Authored-By: Claude Opus 5 --- public/assets/site.css | 12 +++++++++--- public/index.html | 2 +- public/my.html | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/public/assets/site.css b/public/assets/site.css index 1e40d99..5b538ca 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -60,8 +60,13 @@ nav .links a.active{color:var(--mint);background:rgba(67,232,195,.1)} .btn.quiet:hover{background:rgba(139,166,156,.1);color:var(--ink);border-color:var(--muted);box-shadow:none} /* the member's campaign actions sat flush against each other on desktop; the mobile rule already had a gap, this gives the wide layout the same room */ -.camp-table td.act .btn{margin-right:8px} -.camp-table td.act .btn:last-child{margin-right:0} +/* Campaign actions (Marty, 2026-09-23): the column is narrow, so these stack. Left-aligned pills + of different widths read as a ragged edge, and a wrapped label inside a 999px radius turns into + a tall oval. They are a centred, even-width stack with a modest corner instead. */ +.camp-table td.act{text-align:center;vertical-align:middle} +.camp-table td.act .btn{display:block;width:100%;min-width:118px;margin:0 0 8px;border-radius:10px; + text-align:center;line-height:1.25;white-space:normal} +.camp-table td.act .btn:last-child{margin-bottom:0} .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none} /* ── hero: centered, light-trail set-piece ─────────── */ .hero{position:relative;text-align:center;padding:120px 0 84px;overflow:visible} @@ -746,7 +751,8 @@ img{max-width:100%} .camp-table td:first-child{display:block;padding:0 0 6px;font-size:16px} .camp-table td:first-child::before{display:none} .camp-table td:first-child > *{max-width:100%} .camp-table td.act{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)} .camp-table td.act::before{display:none} - .camp-table td.act .btn{flex:1 1 auto;text-align:center} + /* on a phone the card is wide enough for them to share a row, so undo the desktop stack */ + .camp-table td.act .btn{flex:1 1 auto;text-align:center;display:inline-block;width:auto;min-width:0;margin:0} } /* Pipeline board (Marty, 2026-09-15): columns scroll sideways inside their own box, never the page */ diff --git a/public/index.html b/public/index.html index 8ee1fb7..e2e3ef4 100644 --- a/public/index.html +++ b/public/index.html @@ -20,7 +20,7 @@ - + diff --git a/public/my.html b/public/my.html index a36b773..7cc0abf 100644 --- a/public/my.html +++ b/public/my.html @@ -5,7 +5,7 @@ Member area | InstantAdPay - +