Commitebe6d64unknown_key
polish(mobile): responsive media queries for top 10 surfaces (375px viewport)
1 file changed+28−0ebe6d647b873798c25e180c82490e11036baca76
1 changed file+28−0
Modifiedsrc/routes/auth.tsx+28−0View fileUnifiedSplit
@@ -47,6 +47,31 @@ const auth = new Hono<AuthEnv>();
4747// between requests.
4848let _autoVerifyWarned = false;
4949
50// ───────────────────────────────────────────────────────────────────────
51// Scoped mobile polish — tightens the existing `.auth-container` shell
52// from layout.tsx for ≤720px viewports. Only adds rules; does not
53// redefine the desktop styling. Kept inline so this file remains the
54// single source of truth for the auth surface.
55// ───────────────────────────────────────────────────────────────────────
56const authMobileCss = `
57 @media (max-width: 720px) {
58 .auth-container {
59 margin: 24px 12px;
60 padding: 24px 20px 22px;
61 max-width: 100%;
62 }
63 .auth-container .btn-primary { min-height: 44px; }
64 .auth-container .oauth-btn { min-height: 44px; }
65 .auth-container input[type="text"],
66 .auth-container input[type="email"],
67 .auth-container input[type="password"] { min-height: 44px; }
68 .auth-forgot { text-align: left !important; }
69 }
70`;
71const AuthMobileStyle = () => (
72 <style dangerouslySetInnerHTML={{ __html: authMobileCss }} />
73);
74
5075// --- Web UI ---
5176
5277auth.get("/register", softAuth, (c) => {
@@ -58,6 +83,7 @@ auth.get("/register", softAuth, (c) => {
5883 const csrf = c.get("csrfToken") as string | undefined;
5984 return c.html(
6085 <Layout title="Register" user={null}>
86 <AuthMobileStyle />
6187 <div class="auth-container">
6288 <h2>Create your account</h2>
6389 <p class="auth-subtitle">
@@ -314,6 +340,7 @@ auth.get("/login", softAuth, async (c) => {
314340 const csrf = c.get("csrfToken") as string | undefined;
315341 return c.html(
316342 <Layout title="Sign in" user={null}>
343 <AuthMobileStyle />
317344 <div class="auth-container">
318345 <h2>Welcome back</h2>
319346 <p class="auth-subtitle">
@@ -596,6 +623,7 @@ auth.get("/login/2fa", async (c) => {
596623 const redirect = c.req.query("redirect") || "/";
597624 return c.html(
598625 <Layout title="Two-factor authentication" user={null}>
626 <AuthMobileStyle />
599627 <div class="auth-container">
600628 <h2>Enter your code</h2>
601629 <p
602630