Telefonen fastnade i inzoomat läge efter inloggning

Rapporterat med skärmdump: portalens första sida möttes kraftigt
inzoomad efter inloggning på iPhone. Orsaken är iOS Safaris beteende,
inte vår layout: ett formulärfält vars text är mindre än 16 px får
webbläsaren att zooma in vid fokus — och den zoomar aldrig ut igen
efter navigeringen. Inloggningens fält är 14 px och arbetsvyns 13 px,
båda under tröskeln.

Botemedlet är fältets textstorlek, inte viewport-metataggen.
`maximum-scale=1` hade också stoppat inzoomningen men samtidigt tagit
ifrån användaren nypzoomen, och ett tillgänglighetsverktyg offras inte
för att slippa en CSS-rad. Regeln ligger i kaskaden på .alva-yta och
gäller bara pekskärmar (hover: none, pointer: coarse) — på skrivbordet
finns ingen autozoom och 13 px är designens täthet.

Verifierat mot den bakade artefakten med pekskärmsemulering:
inloggningen och arbetsvyns namnfält mäter 16 px på telefon, 14
respektive 13 px på skrivbord. Regeln låst i designtestet, som redan
läser index.css.

769 tester, typkontroll, lint och artefaktmätning gröna.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt

felsokning/app/src/felsokning/__tests__/alva-yta.test.ts

@@ -232,6 +232,19 @@ describe("ALVA-ytan bär sin egen typografi", () => {
   it("siffror sätts med fast bredd så beteckningar går att jämföra", () => {
     expect(css).toContain("tabular-nums");
   });
+
+  it("formulärfält är minst 16 px på pekskärm — annars autozoomar iOS och fastnar", () => {
+    // Buggen som rapporterades från en telefon: inloggningens fält är
+    // 14 px, iOS zoomar in vid fokus och zoomar aldrig ut, och portalens
+    // första sida möts i inzoomat läge. Botemedlet är textstorleken,
+    // inte maximum-scale — nypzoomen är ett tillgänglighetsverktyg och
+    // får inte offras.
+    const regel = css.match(/@media \(hover: none\) and \(pointer: coarse\)[\s\S]*?\n\}/)?.[0] ?? "";
+    expect(regel).toContain(".alva-yta input");
+    expect(regel).toContain(".alva-yta textarea");
+    expect(regel).toContain(".alva-yta select");
+    expect(regel).toContain("font-size: 16px");
+  });
 });
 
 // ---- Snittet måste följa med i bygget ----------------------------------

felsokning/app/src/index.css

@@ -199,6 +199,23 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* iOS Safari zoomar in på ett formulärfält vars text är mindre än 16 px
+   — och zoomar inte ut igen efter navigeringen. Den som loggade in på en
+   telefon fastnade därför i inzoomat läge på portalens första sida.
+
+   Botemedlet är fältets textstorlek, inte viewport-metataggen:
+   `maximum-scale=1` hade också stoppat inzoomningen men samtidigt tagit
+   ifrån användaren nypzoomen, och ett tillgänglighetsverktyg ska inte
+   offras för att slippa en CSS-rad. Regeln gäller bara pekskärmar —
+   på skrivbordet finns ingen autozoom och 13 px är rätt täthet. */
+@media (hover: none) and (pointer: coarse) {
+  .alva-yta input:not([type="checkbox"]):not([type="radio"]),
+  .alva-yta select,
+  .alva-yta textarea {
+    font-size: 16px;
+  }
+}
+
 .alva-yta .font-mono {
   font-family:
     ui-monospace,