diff --git a/CLAUDE.md b/CLAUDE.md index b989218..e2dd45c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -474,11 +474,13 @@ machines and architecture. ### Actions hub (`/actions/view`) -`actions_view.j2` is one flat `.action-button-grid` (Grid `auto-fit`, -`minmax(15rem, 1fr)`) of `.mps-button` links inside an `.action-columns` -well — no `
` spacers, no fixed two-column split. Add new operator -shortcuts as another `` in that -grid; it balances and wraps on its own. +`actions_view.j2` is one flat `.action-button-grid` of `.mps-button` links +inside an `.action-columns` well — single column on narrow viewports, +**at most two equal columns** at ≥720px (`grid-template-columns: 1fr 1fr`), +auto-flow row-by-row so the columns stay balanced. No `
` spacers. The +grid resets `.mps-button`'s `min-width: 100%` + auto margins (they fight +track sizing and eat the `gap`). Add a new operator shortcut as another +`
` in that grid. ## Feature Kill Switches (MPS-22) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 98c70ad..a39b59e 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -2025,24 +2025,39 @@ section.checkout-page .well { background-image: url("/static/img/trans-green.png"); } -/* Action hub (actions_view.j2): one flat, balanced grid of buttons that - wraps responsively. Track min-width (15rem) is comfortably wider than - the widest button label so nowrap buttons never overflow the well. - Grid only — no flex. */ +/* Action hub (actions_view.j2): one flat list of operator-shortcut + buttons that auto-flows into AT MOST two equal columns (single column + on narrow viewports). Grid only — no flex, no
spacers. + `.mps-button` defaults to `min-width: 100%` + auto margins which fights + grid track sizing and eats the gap, so we reset those on grid items. */ .action-columns { display: grid; - max-width: 1100px; + max-width: 760px; margin: 0 auto; padding: var(--space-5, 20px); } .action-button-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); - gap: var(--space-3, 12px); + grid-template-columns: 1fr; + column-gap: var(--space-4, 16px); + row-gap: var(--space-3, 12px); align-content: start; } +@media (min-width: 720px) { + .action-button-grid { + grid-template-columns: 1fr 1fr; + } +} + +.action-button-grid .mps-button { + min-width: 0; + width: 100%; + box-sizing: border-box; + margin: 0; +} + /* markup editor css */ diff --git a/make_post_sell/templates/actions_view.j2 b/make_post_sell/templates/actions_view.j2 index 43132f9..412d8d6 100644 --- a/make_post_sell/templates/actions_view.j2 +++ b/make_post_sell/templates/actions_view.j2 @@ -14,9 +14,7 @@ {% if request.shop.gift_card_enabled %}
🎁  Gift Cards {% endif %} - {% if request.shop.offer_enabled %} 🤝  Offers - {% endif %} 👤  Shop Users 💰  Shop Sales 💬  Shop Comments