Gör ALVA läsbart på telefon

Portalens tabeller sköt ut dokumentet till 842 px på en 390 px-skärm.
Sidan gick att dra i sidled och texten kapades i högerkanten.

Tre orsaker, tre olika svar.

Tabellerna. En sexkolumnstabell på en telefon har två utfall och bägge är
dåliga: antingen tvingas hela sidan i sidled, eller så scrollar tabellen
inuti sig själv och läsaren ser tre tecken av varje kolumn. Under 640 px
blir varje rad därför en grupp namngivna fält — kolumnrubriken som
etikett, cellen som värde. Samma form som Falt redan använder, och samma
princip som resten av ytan: ett instrumentpanelsblad läses uppifrån och
ner. Bägge formerna renderas och växlas med bredd, inte med JavaScript.

Navigationen. Portalens fem länkar bröts inte utan breddade dokumentet.
Raden bryts nu, med tätare mellanrum på smal skärm.

Fasindikatorn. Kolumnerna saknade min-w-0 och kunde därför inte krympa
under sitt innehåll. Ett första försök lät namnen brytas, men
"LOCALIZA/TION" mitt i ordet är inte tydligare än inget namn. Under
640 px bär bokstaven och statussymbolen informationen — vilket är precis
vad A·L·V·A är till för — medan raden ovanför namnger den aktiva fasen
och dess syfte i klartext. Namnet finns kvar för skärmläsare.

Mätt vid 390 och 360 px: samtliga sju ALVA-vyer, ansökans kvittens,
ärendelistan och ärendesidans tre flikar håller sig nu inom skärmbredden.
Fyra tester låser konstruktionerna. Designtestet fångade förresten mitt
eget brott mot 8-px-rutnätet på vägen — py-1 — och koden rättades, inte
testet.

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

felsokning/app/src/pages/alva/Ram.tsx

@@ -40,8 +40,11 @@ export function Ram({ children, portal = false }: { children: ReactNode; portal?
             </span>
           </Link>
 
+          {/* Portalens fem länkar fick inte plats på en telefon och sköt
+              ut dokumentet i sidled i stället för att brytas. Raden bryts
+              nu, med tätare mellanrum på smal skärm. */}
           <nav aria-label={portal ? "Portal" : "Site"}>
-            <ul className="flex gap-6">
+            <ul className="flex flex-wrap gap-2 sm:gap-6">
               {lankar.map((l) => {
                 const aktiv = plats.pathname === l.till;
                 return (