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