Text som lade sig ovanpå text — och kontrollen som inte såg det

Etiketten AUTHENTICATION är bredare än 96 px och kan inte brytas. Den
staplade mobilformen gav den `w-[96px]`, så texten rann ut ur sin ruta
medan värdet började vid 96 px. Bokstäverna hamnade ovanpå varandra.
`min-w` låter korta etiketter hålla kolumnen och långa knuffa värdet
till nästa rad i stället.

Det allvarligare var att breddmätningen i genomgången inte kunde ha
hittat det här: överspill gör inte dokumentet bredare. Ett första försök
att jämföra elementens rutor rapporterade noll krockar med felet
återinlagt — rutorna skar aldrig varandra, bara bokstäverna gjorde det.
Mätningen jämför därför nu elementets textbredd med dess egen ruta, och
görs över portalens åtta vyer i telefonbredd.

Bevisad: med `w-[96px]` återinlagt faller genomgången med exitkod 1 och
pekar på kunskapskällor och Authentication. Med `min-w` grön igen.

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 10:35:57 +00:00
parent b457543ede
commit c9fdef27c9
2 changed files with 59 additions and 1 deletions
+7 -1
View File
@@ -393,8 +393,14 @@ export function Tabell({ kolumner, rader }: { kolumner: string[]; rader: ReactNo
>
{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. */}
<dt
className="w-[96px] shrink-0 text-[11px] font-semibold uppercase tracking-[0.08em]"
className="min-w-[96px] shrink-0 text-[11px] font-semibold uppercase tracking-[0.08em]"
style={{ color: FARG.steel }}
>
{kolumner[j]}