adam/meal-order-manager
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/meal-order-manager.git synced 2026-10-07 16:18:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(form): preserve 480px user bar boundary

Browse source 
Keep the mobile layout below 480px and lock both sides of the breakpoint with browser coverage.
This commit is contained in:
Adam Moussa 2026-07-30 18:14:01 -04:00
parent 8d81ebb4cc
commit 7b3fb8f8d1
No known key found for this signature in database
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/server/templates/form.css
View file

@ -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); }

18
tests/test_generate_form.py
View file

@ -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"
)