also looking at this
fix(auth): keep sign-in inputs at 16px so iOS does not zoom on focus
#8
2 files
+24
-2
| @@ -16,13 +16,13 @@ | ||
| 16 | 16 | :root.dark { --paper: #191715; --ink: #f8f0e8; --muted: #b9aca1; --coral: #ff8a78; --coral-ink: #191715; --line: #403a35; --panel: #24211e; color-scheme: dark; } |
| 17 | 17 | html { background: var(--paper); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } h1 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; } |
| 18 | 18 | .paper { background: var(--paper); } .panel { background: var(--panel); } .ink { color: var(--ink); } .muted { color: var(--muted); } .coral { color: var(--coral); } .bg-coral { background: var(--coral); } .border-tone { border-color: var(--line); } |
| 19 | .field { width: 100%; box-sizing: border-box; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 14px/1.4 ui-sans-serif, -apple-system, sans-serif; } | |
| 19 | .field { width: 100%; box-sizing: border-box; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 16px/1.4 ui-sans-serif, -apple-system, sans-serif; } | |
| 20 | 20 | .field:focus { outline: 2px solid var(--coral); outline-offset: 1px; } |
| 21 | 21 | </style> |
| 22 | 22 | @stack('head') |
| 23 | 23 | </head> |
| 24 | 24 | <body> |
| 25 | <main class="flex justify-center items-center px-5 py-12 min-h-screen"> | |
| 25 | <main class="flex items-center justify-center px-5 py-12 min-h-screen"> | |
| 26 | 26 | @yield('content') |
| 27 | 27 | </main> |
| 28 | 28 | @stack('scripts') |
| @@ -0,0 +1,22 @@ | ||
| 1 | import { describe, expect, it } from 'bun:test' | |
| 2 | import { readFileSync } from 'node:fs' | |
| 3 | import { join } from 'node:path' | |
| 4 | ||
| 5 | const auth = readFileSync(join(import.meta.dir, '../../resources/views/layouts/auth.stx'), 'utf8') | |
| 6 | ||
| 7 | // iOS Safari zooms the page when a focused input's font-size is under 16px, | |
| 8 | // and leaves it zoomed and scrolled sideways afterwards. The sign-in and | |
| 9 | // sign-up forms are the first thing a phone user types into. | |
| 10 | describe('mobile layout contracts', () => { | |
| 11 | it('keeps auth inputs at 16px so iOS does not zoom on focus', () => { | |
| 12 | const field = auth.match(/\.field\s*\{[^}]*\}/)?.[0] ?? '' | |
| 13 | const size = Number(field.match(/font:\s*\d+\s+(\d+(?:\.\d+)?)px/)?.[1]) | |
| 14 | expect(size).toBeGreaterThanOrEqual(16) | |
| 15 | }) | |
| 16 | ||
| 17 | it('leaves pinch-zoom available on the auth pages', () => { | |
| 18 | const viewport = auth.match(/<meta name="viewport" content="([^"]+)"/)?.[1] ?? '' | |
| 19 | expect(viewport).toContain('width=device-width') | |
| 20 | expect(viewport).not.toMatch(/user-scalable=no|maximum-scale=1(?![.\d])/) | |
| 21 | }) | |
| 22 | }) | |