From 660b577d323d2a8aabae586fa9535774e294a305 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Fri, 15 May 2026 12:30:28 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20extend=20mobile=20order=20rules=20to=20t?=
 =?UTF-8?q?ablet=20=E2=80=94=20close=20the=20800-959=20gap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 make_post_sell/static/css/common.css | 52 ++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index da4474d..13f4e15 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -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;