From 6aceea3a12b2b09383479b7ff641667192754c1d Mon Sep 17 00:00:00 2001 From: AINative Admin Date: Tue, 6 Oct 2026 21:06:41 -0700 Subject: [PATCH] fix(auth): phone-login form layout breaks on live mobile (#944 follow-up) Live-verified in a real mobile browser after merge: .m-auth-fields-email and .m-auth-phone-form had display:flex with no flex-direction, so their children (form fields, submit button, OAuth button) laid out in a row instead of stacked. On the actual target device (<=760px) this made the email-form escape hatch render as giant overlapping sideways buttons -- confirmed by screenshot, not just inferred from code. This was flagged as a deferred minor ("no dedicated CSS") in the prior fix-pass review, but live testing showed it's a real layout break, not just unstyled controls -- fixing now rather than leaving it deferred. --- app/modernist.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/modernist.css b/app/modernist.css index a8b1cadb..6de57668 100644 --- a/app/modernist.css +++ b/app/modernist.css @@ -1249,7 +1249,11 @@ .m-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } /* #944 Part 2 — above the mobile breakpoint, default to the existing email/password form; .m-auth-force-phone is the explicit opt-in. */ -.m-auth-phone-form { display: none; } +.m-auth-phone-form { display: none; flex-direction: column; gap: 14px; } +.m-auth-fields-email { display: flex; flex-direction: column; } +.m-auth-escape-row { margin-top: 16px; } +.m-auth-escape { background: none; border: 0; cursor: pointer; font-size: 13px; color: var(--text-muted); text-decoration: underline; padding: 0; } +.m-auth-escape:hover { color: var(--text); } .m-auth.m-auth-force-phone .m-auth-phone-form { display: flex; } .m-auth.m-auth-force-phone .m-auth-fields-email { display: none; } .m-auth-brand { background: var(--alert); color: #fff; padding: 56px 44px; display: flex; flex-direction: column; justify-content: center; } @@ -1717,7 +1721,7 @@ .m-auth-phone-form { display: flex; } .m-auth-fields-email { display: none; } .m-auth.m-auth-force-email .m-auth-phone-form { display: none; } - .m-auth.m-auth-force-email .m-auth-fields-email { display: flex; } + .m-auth.m-auth-force-email .m-auth-fields-email { display: flex; flex-direction: column; } .m-pricing { padding: 32px 20px; } .m-tiers { grid-template-columns: 1fr; }