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(/