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

fix: extend mobile order rules to tablet — close the 800-959 gap

Browse source 
8b25285 hoisted the buy CTA above the title on mobile, but the
@media (max-width: 800px) breakpoint left a 160px gap (800-959) where
neither mobile order rules nor the desktop two-column grid applied.
In that range the page fell to source order and the buy zone sank back
below comments — fox's tablet screenshot.

Bump the order/single-column block to (max-width: 959px) so portrait
tablet + small-laptop widths get the same hoisted-CTA stack as phone.
Pull the mobile-only max-width: 600px readability cap out into its
own (max-width: 800px) block — tablet keeps a wider centered column
instead of being pinned to a phone-width strip.
This commit is contained in:
russell@unturf.com 2026-05-15 12:30:28 -04:00
parent e284f88923
commit 660b577d32
No known key found for this signature in database
1 changed files with 50 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1546,6 +1546,40 @@ form.tag-suggest-form {
margin: 0;
}
/* MPS-24 Phase 2.4: SPA flash toasts on the bulk tagger */
div.tag-flash {
display: grid;
gap: var(--space-2, 8px);
margin: 0 0 var(--space-3, 12px) 0;
}
div.tag-flash-toast {
padding: var(--space-2, 8px) var(--space-3, 12px);
border-radius: var(--radius-sm, 4px);
border: 1px solid var(--color-border, #d1d5db);
background: var(--color-surface-2, #f9fafb);
color: var(--color-text, #111);
transition: opacity 400ms ease;
}
div.tag-flash-success {
background: var(--color-success-subtle, #ecfdf5);
border-color: var(--color-success, #10b981);
color: var(--color-success-strong, #065f46);
}
div.tag-flash-error {
background: var(--color-danger-subtle, #fef2f2);
border-color: var(--color-danger, #ef4444);
color: var(--color-danger-strong, #991b1b);
}
div.tag-flash-info {
background: var(--color-info-subtle, #eff6ff);
border-color: var(--color-info, #3b82f6);
color: var(--color-info-strong, #1e40af);
}
/* Tag detail page header */
section.tag-detail-header {
margin: var(--space-3, 12px) 0;
@ -2631,12 +2665,15 @@ textarea.markup-editor-textarea {
color: var(--color-green, #a3c765);
}
@media (max-width: 800px) {
/* Use 959px (one below the desktop two-column breakpoint at 960px) so
tablet portrait + small-laptop widths get the same hoisted-CTA stack
as phone — without it, viewports in the 800-959 gap fall to source
order and the buy zone sinks below comments again. */
@media (max-width: 959px) {
/* the two-column is stacked by default. */
section.two-column {
display: grid;
grid-template-columns: 1fr;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding-left: 4px;
@ -2735,7 +2772,18 @@ textarea.markup-editor-textarea {
width: 100%;
min-width: 100%;
}
}
/* Mobile-only readability constraint: keep the single-column stack from
stretching edge-to-edge on phones. Tablet (800-959) intentionally
skips this so its wider viewport isn't pinned to a 600px column. */
@media (max-width: 800px) {
section.two-column {
max-width: 600px;
}
}
@media (max-width: 800px) {
/* the cart-grid is stacked by default. */
section.cart-grid {
max-width: 600px;