fix(opgave): teksten kan læses færdig, også på en telefon

Rapporteret med et billede af en beskrivelse, der manglede sit første bogstav på
hver linje: "hermostat RU0910301440" og "atteries". Det er ikke manglende tegn —
det er et felt, der er rullet til højre. Og det ligner ikke rulning; det ligner,
at bogstaverne ikke er der.

To ting på én skærm.

Titlen var et <input>, og et input kan ikke ombryde. "tado°: Your Smart
Thermostat needs new batteries" er en almindelig opgavetitel, og på 390 px var
feltet 490 px bredt i en kasse på 356 — halvdelen af overskriften stod uden for
kanten. Den er nu et <textarea>, der vokser med sin tekst. Retur gemmer frem for
at lave en ny linje: en titel er én linje, uanset hvor mange den fylder på
skærmen. Trækkehåndtaget er væk, for højden sættes af teksten, og et håndtag
ville love noget, det næste bogstav retter tilbage.

Beskrivelsen er tit et klippet stykke mail med en URL i. Et <textarea> ombryder
ved mellemrum, og en URL har ingen.

`break-word` og ikke `anywhere`: den første bryder kun et ord, der ikke kan stå på
en linje alene, mens den anden bryder ved først givne lejlighed og delte
"GarageRisteriet" midt i en stavelse. Den lektion står allerede ved h1 på
projektsiden og er betalt én gang.

Prøven måler frem for at beskrive: et felt, der ruller vandret, har en
scrollWidth større end sin clientWidth. Kørt mod den gamle komponent fejler den
med "Opgavens tekst: 490 > 356".

Men kun den ene halvdel. Beskrivelsen løber ikke over i Chromium, heller ikke
uden reglen — det var Safari, den blev set i. Prøven måler derfor den regel frem
for dens virkning, og det står skrevet i prøven, så den næste ved, hvad den
vogter og hvad den ikke gør.

Bemærket undervejs: "en delt note tager de noter med, den peger på" fejlede én
gang ud af to fulde kørsler med "Delt med Mikkel." uden antallet. Den består
alene og i næste fulde kørsel. Den er ikke rørt her, men den flakker.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/e2e/smoke.spec.js

@@ -4755,3 +4755,69 @@ test('et indsat billede kan åbnes stort og kopieres', async ({ page, context })
 
 	expect(trouble).toEqual([]);
 });
+/**
+ * En opgaves tekst kan læses færdig, også på en telefon.
+ *
+ * Rapporteret fra en telefon, med et billede af en beskrivelse, der manglede sit
+ * første bogstav på hver linje: "hermostat RU0910301440" og "atteries". Det er
+ * ikke manglende tegn — det er et felt, der er rullet til højre. En beskrivelse er
+ * tit et klippet stykke mail med en URL i, et <textarea> ombryder ved mellemrum,
+ * og en URL har ingen.
+ *
+ * Og titlen var et <input>, som ikke kan ombryde overhovedet. "tado°: Your Smart
+ * Thermostat needs new batteries" er en almindelig opgavetitel, og halvdelen af
+ * den stod uden for kanten.
+ */
+test('en opgaves tekst kan læses færdig på en telefon', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.setViewportSize({ width: 390, height: 844 });
+	await page.goto('/');
+
+	const langTitel = 'tado°: Your Smart Thermostat needs new batteries';
+	// "i dag" for at den lander på siden, prøven står på — parseren klipper det ud
+	// af titlen igen, så den hedder præcis det, den skal.
+	await page.getByLabel('Ny opgave').fill(`${langTitel} i dag`);
+	await page.getByLabel('Ny opgave').press('Enter');
+	await page.getByText('tado°', { exact: false }).first().click();
+
+	const titel = page.getByLabel('Opgavens tekst');
+	await expect(titel).toBeVisible();
+	await expect(titel).toHaveValue(langTitel);
+
+	// Beskrivelsen: en URL uden et eneste mellemrum at bryde ved.
+	const url = 'https://link.tado.com/emails/8/ttid/1-a37f2c9b4e6d8a1f0c3b5e7d9a2f4c6b8e0d1a3f5c7b9e2d4a6f8c0b3e5d7a9f';
+	const beskrivelse = page.getByLabel('Beskrivelse');
+	await beskrivelse.fill(`Thermostat RU0910301440\nBatteries\n${url}`);
+	await beskrivelse.blur();
+
+	// Målt frem for beskrevet: et felt, der ruller vandret, har en scrollWidth
+	// større end sin clientWidth. Det var dét, der klippede venstre kant.
+	//
+	// Felterne måles gennem deres egne lokatorer og ikke med en forespørgsel på
+	// aria-label: beskrivelsen har et <label for>, ikke et aria-label, så en
+	// forespørgsel fandt ingenting og ville have bestået tomt.
+	const spild = [];
+	for (const [navn, felt] of [
+		['Opgavens tekst', titel],
+		['Beskrivelse', beskrivelse]
+	]) {
+		const m = await felt.evaluate((el) => ({ ind: el.scrollWidth, ude: el.clientWidth }));
+		if (m.ind - m.ude > 1) spild.push(`${navn}: ${m.ind} > ${m.ude}`);
+	}
+	expect(spild).toEqual([]);
+
+	// Beskrivelsen løber ikke over i Chromium, heller ikke uden reglen — det var
+	// Safari, den blev set i, og det er en anden motor. Prøven måler derfor reglen
+	// selv frem for dens virkning. Det er svagere, og det står her, så den næste
+	// ved det: den vogter mod at reglen bliver slettet, ikke mod at den er forkert.
+	await expect(beskrivelse).toHaveCSS('overflow-wrap', 'break-word');
+
+	// Og titlen er blevet høj nok til at rumme sig selv frem for at klippe.
+	const linjer = await titel.evaluate((el) => ({
+		hoejde: el.clientHeight,
+		linje: parseFloat(getComputedStyle(el).lineHeight)
+	}));
+	expect(linjer.hoejde).toBeGreaterThan(linjer.linje * 1.5);
+
+	expect(trouble).toEqual([]);
+});