platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Staplade tabeller: rubrik i stället för arton etiketter

Browse Source 
Den staplade formen upprepade kolumnnamnet före VARJE cell. Sex rader
gånger tre kolumner blev arton etiketter av samma vikt, och innehållet
drunknade i dem — kvartalsrapporten på startsidan var en vägg av
SECTION / CONTENT / BASIS där själva texten var det minst framträdande.

Etiketten för första kolumnen var dessutom rent brus. Den cellen ÄR
radens identitet, och att skriva "SEKTION" ovanför "New validated
diagnostic patterns" säger ingenting som inte redan står där.

Första cellen är därför rubrik utan etikett, resten etiketteras, och
blocken skiljs med ram och bakgrund i stället för med en hårstreckslinje
— ögat ska se var en post börjar utan att läsa. Arton etiketter blev sex
rubriker och tolv små etiketter.

Ändringen ligger i Tabell och gäller därmed varje staplad tabell i
portalen: garantier, försäkring, support, abonnemang, fakturor,
Impressum och utgåvor.

491 tester · genomgången 4/4 · artefakten ren.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt
This commit is contained in:
Claude
2026-08-06 16:03:11 +00:00
parent 5579006e79
commit 934bc2e4bc
1 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
felsokning/app/src/alva/komponenter.tsx
+25 -17
View File
@@ -457,33 +457,41 @@ export function Tabell({ kolumner, rader }: { kolumner: string[]; rader: ReactNo
</table>
</div>
<div className="sm:hidden">
{/* ---- Smal skärm ------------------------------------------------
Den staplade formen upprepade kolumnnamnet före VARJE cell: sex
rader gånger tre kolumner blev arton etiketter av samma vikt,
och innehållet drunknade i dem. Etiketten för första kolumnen
var dessutom rent brus — den cellen ÄR radens identitet, och att
skriva "SEKTION" ovanför den säger ingenting.
Första cellen är därför rubrik utan etikett, och resten
etiketteras. Blocken skiljs med bakgrund i stället för med en
hårstreckslinje, så att ögat ser var en post börjar utan att
läsa. */}
<div className="grid gap-2 sm:hidden">
{rader.map((rad, i) => (
<dl
key={i}
className="border-b py-2 last:border-b-0"
style={{ borderColor: FARG.lightSteel }}
>
{rad.map((cell, j) => (
<div key={j} className="mt-2 flex flex-wrap items-baseline gap-2 first:mt-0">
{/* `min-w` och inte `w`: en etikett som AUTHENTICATION är
bredare än 96 px och kan inte brytas, så en fast bredd
fick den att spilla ut ur sin ruta och lägga sig ovanpå
värdet. Med en minimibredd håller korta etiketter
kolumnen, och långa knuffar i stället värdet till nästa
rad — behållaren bryter redan. */}
<div key={i} className="border p-4" style={{ borderColor: FARG.lightSteel, background: FARG.white }}>
<p className="text-[14px] font-semibold leading-[21px]" style={{ color: FARG.graphite }}>
{rad[0]}
</p>
{rad.length > 1 && (
<dl className="mt-4 grid gap-2">
{rad.slice(1).map((cell, j) => (
<div key={j}>
<dt
className="min-w-[96px] shrink-0 text-[11px] font-semibold uppercase tracking-[0.08em]"
className="text-[10px] font-semibold uppercase tracking-[0.08em]"
style={{ color: FARG.steel }}
>
{kolumner[j]}
{kolumner[j + 1]}
</dt>
<dd className="m-0 min-w-0 flex-1 text-[13px] leading-[20px]" style={{ color: FARG.graphite }}>
<dd className="m-0 mt-2 text-[13px] leading-[20px]" style={{ color: FARG.graphite }}>
{cell}
</dd>
</div>
))}
</dl>
)}
</div>
))}
</div>
</>