From 07b6713245bb013bc5095e32c5177aa5793c3d1d Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 5 Aug 2026 20:24:46 +0000 Subject: [PATCH] =?UTF-8?q?G=C3=B6r=20ALVA=20l=C3=A4sbart=20p=C3=A5=20tele?= =?UTF-8?q?fon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt --- felsokning/app/src/alva/komponenter.tsx | 117 +++++++++++++----- .../src/felsokning/__tests__/alva-yta.test.ts | 37 ++++++ felsokning/app/src/pages/alva/Ram.tsx | 5 +- 3 files changed, 130 insertions(+), 29 deletions(-) diff --git a/felsokning/app/src/alva/komponenter.tsx b/felsokning/app/src/alva/komponenter.tsx index d07edf1..b6b1e05 100644 --- a/felsokning/app/src/alva/komponenter.tsx +++ b/felsokning/app/src/alva/komponenter.tsx @@ -164,7 +164,11 @@ export function Fasrad({ aktiv, klara = [] }: { aktiv: Fas; klara?: Fas[] }) {
  • {f.bokstav} -
    {f.namn}
    -
    + {/* På en telefon ryms inte LOCALIZATION i en fjärdedels + skärmbredd, och ett tvingat radbrott mitt i ordet är inte + tydligare än inget namn alls. 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. */} +
    {f.namn}
    + {f.namn} +
    {f.syfte}
    • @@ -293,34 +304,84 @@ export function Knapp({ ); } +/** + * Tabell — med en andra form för smala skärmar. + * + * 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. Det första är vad + * som hände här — dokumentet blev 842 px brett på en 390 px-skärm och + * texten kapades. + * + * Under 640 px blir varje rad därför en grupp namngivna fält i stället: + * kolumnrubriken som etikett, cellen som värde. Det är samma form som + * `Falt` redan använder, och samma princip som resten av ytan — ett + * instrumentpanelsblad läser man uppifrån och ner, inte i sidled. + * + * Bägge formerna renderas och växlas med bredd, inte med JavaScript. Det + * håller markeringen fri från tillstånd och fungerar innan skriptet + * kört. + */ export function Tabell({ kolumner, rader }: { kolumner: string[]; rader: ReactNode[][] }) { return ( - - - - {kolumner.map((k) => ( - - ))} - - - - {rader.map((rad, i) => ( - - {rad.map((cell, j) => ( - + <> +
    +
    - {k} -
    - {cell} -
    + + + {kolumner.map((k) => ( + + ))} + + + + {rader.map((rad, i) => ( + + {rad.map((cell, j) => ( + + ))} + ))} - + +
    + {k} +
    + {cell} +
    + + +
    + {rader.map((rad, i) => ( +
    + {rad.map((cell, j) => ( +
    +
    + {kolumner[j]} +
    +
    + {cell} +
    +
    + ))} +
    ))} - - +
    + ); } diff --git a/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts b/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts index d11d63f..b75d957 100644 --- a/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts +++ b/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts @@ -119,3 +119,40 @@ describe("ALVA-ytan är fri från andra produkters meddelanden", () => { expect(banner).toMatch(/pathname === p \|\| pathname\.startsWith\(`\$\{p\}\/`\)/); }); }); + +// ---- Mobil: ytan får aldrig bli bredare än skärmen --------------------- +// +// Portalens tabeller sköt ut dokumentet till 842 px på en 390 px-skärm. +// Texten kapades i högerkanten och sidan gick att dra i sidled — det som +// syntes i skärmdumpen från en telefon. +// +// Testet läser koden i stället för att rendera, vilket är trubbigt men +// fångar just de konstruktioner som orsakade det: en tabell utan smal +// form, en navigationsrad som inte bryts, och en flexkolumn som inte får +// krympa under sitt innehåll. Den faktiska bredden mäts i genomgången. +describe("ALVA-ytan håller sig inom skärmbredden", () => { + const komponenter = filer.find(([n]) => n.endsWith("alva/komponenter.tsx"))![1]; + const ram = filer.find(([n]) => n.endsWith("pages/alva/Ram.tsx"))![1]; + + it("Tabell har en smal form för telefon, inte bara sidledsscroll", () => { + // En sexkolumnstabell som scrollar i sidled ryms, men går inte att + // läsa. Den smala formen är staplade namngivna fält. + expect(komponenter).toContain("sm:hidden"); + expect(komponenter).toMatch(/ { + expect(komponenter).toContain('className="hidden overflow-x-auto sm:block"'); + }); + + it("navigationsraden bryts i stället för att bredda sidan", () => { + expect(ram).toMatch(/
      { + // Utan min-w-0 sätter innehållet golvet för kolumnbredden, och fyra + // kolumner blir bredare än telefonen. + expect(komponenter).toContain("min-w-0 flex-1"); + }); +}); diff --git a/felsokning/app/src/pages/alva/Ram.tsx b/felsokning/app/src/pages/alva/Ram.tsx index 54f4019..f9b91dd 100644 --- a/felsokning/app/src/pages/alva/Ram.tsx +++ b/felsokning/app/src/pages/alva/Ram.tsx @@ -40,8 +40,11 @@ export function Ram({ children, portal = false }: { children: ReactNode; portal? + {/* 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. */}