Repository navigation
fix(auth): phone-login form layout breaks on live mobile (#944 follow-up) - #1006
Merged
Merged
Conversation
…-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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Live-verified in a real mobile-width browser session right after #1005 merged and deployed: the email-form escape hatch (and the phone form itself) rendered with giant overlapping sideways buttons instead of a stacked layout. Screenshot-confirmed, not just inferred from code.
Root cause:
.m-auth-fields-emailand.m-auth-phone-formboth setdisplay: flexwith noflex-directionanywhere in the file, so flex defaulted torowfor their children (form fields, submit button, OAuth button).This was called out as a deferred minor in #1005's review ("no dedicated CSS for .m-auth-escape/.m-auth-error") — live testing showed the real impact is worse than cosmetic, it's a genuine layout break on the exact device this feature targets. Fixing immediately rather than leaving it deferred.
Also adds basic
.m-auth-escapebutton styling (was fully unstyled browser-default).No test changes — this is pure CSS; verified via
tsc --noEmit, the existing Auth component test suite (10/10 pass, unaffected since jsdom doesn't load stylesheets), and will re-verify visually against production after merge.