From 7b3fb8f8d10dc20fdc270f22e28fc6ee4b125840 Mon Sep 17 00:00:00 2001
From: Adam Moussa <adam@seahavenind.com>
Date: Thu, 30 Jul 2026 18:14:01 -0400
Subject: [PATCH] fix(form): preserve 480px user bar boundary

Keep the mobile layout below 480px and lock both sides of the breakpoint with browser coverage.
---
 src/server/templates/form.css |  2 +-
 tests/test_generate_form.py   | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/server/templates/form.css b/src/server/templates/form.css
index 78ac7b7..1115a39 100644
--- a/src/server/templates/form.css
+++ b/src/server/templates/form.css
@@ -346,7 +346,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   font-size: 1rem;
 }
 
-@media (max-width: 480px) {
+@media (width < 480px) {
   .user-bar { flex-wrap: wrap; }
   .user-meta { flex-basis: calc(100% - var(--user-bar-indent)); }
   .user-bar #admin-btn { margin-left: var(--user-bar-indent); }
diff --git a/tests/test_generate_form.py b/tests/test_generate_form.py
index 2c98305..f03a7db 100644
--- a/tests/test_generate_form.py
+++ b/tests/test_generate_form.py
@@ -442,16 +442,14 @@ class TestGenerateFormGooglePlaywright:
         )
         assert dimensions["scrollWidth"] == dimensions["clientWidth"]
 
-    def test_user_bar_uses_shared_mobile_breakpoint_at_480(
-        self, signed_in_admin_page
-    ):
+    def test_user_bar_stays_single_row_at_480(self, signed_in_admin_page):
         page = signed_in_admin_page
         page.set_viewport_size({"width": 480, "height": 800})
         assert (
             page.locator(".user-bar").evaluate(
                 "(element) => getComputedStyle(element).flexWrap"
             )
-            == "wrap"
+            == "nowrap"
         )
         dimensions = page.evaluate(
             """() => ({
@@ -460,3 +458,15 @@ class TestGenerateFormGooglePlaywright:
             })"""
         )
         assert dimensions["scrollWidth"] == dimensions["clientWidth"]
+
+    def test_user_bar_wraps_below_shared_mobile_breakpoint(
+        self, signed_in_admin_page
+    ):
+        page = signed_in_admin_page
+        page.set_viewport_size({"width": 479, "height": 800})
+        assert (
+            page.locator(".user-bar").evaluate(
+                "(element) => getComputedStyle(element).flexWrap"
+            )
+            == "wrap"
+        )