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

fix: actions hub — cap at two columns, restore gap, always show Offers button

Browse source 
The previous .action-button-grid used auto-fit/minmax(15rem,1fr) which
produced four columns on a wide well, and .mps-button's `min-width: 100%`
+ auto margins fought grid track sizing so the gap collapsed and buttons
touched. Now: single column on narrow, exactly two equal columns at
≥720px (auto-flow keeps them balanced), explicit column/row gap, and the
grid resets .mps-button min-width/margins. The "🤝 Offers" button is now
always shown to shop owners (was gated on shop.offer_enabled) so the
offers inbox is always reachable.
This commit is contained in:
russell@unturf.com 2026-05-12 18:40:22 -04:00
parent ff6a35b887
commit 6f52af0c2c
No known key found for this signature in database
3 changed files with 29 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
CLAUDE.md
View file

@ -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 `<br>` spacers, no fixed two-column split. Add new operator
shortcuts as another `<a class="mps-button product-edit-button">` 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 `<br>` 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
`<a class="mps-button product-edit-button">` in that grid.
## Feature Kill Switches (MPS-22)

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

@ -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 <br> 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 */

2
make_post_sell/templates/actions_view.j2
View file

@ -14,9 +14,7 @@
{% if request.shop.gift_card_enabled %}
<a href="/s/{{ request.shop.id }}/gift-cards/manage" class="mps-button product-edit-button">🎁&nbsp; Gift Cards</a>
{% endif %}
{% if request.shop.offer_enabled %}
<a href="/s/{{ request.shop.id }}/offers" class="mps-button product-edit-button">🤝&nbsp; Offers</a>
{% endif %}
<a href="/s/{{ request.shop.id }}/users" class="mps-button product-edit-button">👤&nbsp; Shop Users</a>
<a href="/s/{{ request.shop.id }}/sales" class="mps-button product-edit-button">💰&nbsp; Shop Sales</a>
<a href="/s/{{ request.shop.id }}/comments" class="mps-button product-edit-button">💬&nbsp; Shop Comments</a>