fix(notes): grupperne stod tomme — hver liste rullede for sig

Meldt ind som "noter vises ikke i den nye listeform": hver eneste overskrift stod
der med sit tal, og der var ikke en eneste note under nogen af dem.

Før var der ét `<ul>`, og *det* rullede. Da listen blev delt i grupper, blev hver
gruppe sit eget `<ul>` — og dermed sit eget flex-element med `overflow-y: auto`.
Flex-elementer skrumper som udgangspunkt, og et element, der skrumper og klipper,
viser ingenting. Med tyve måneder i søjlen fik hver liste nul at være høj i.

Rulningen hører til kassen om dem alle, ikke til hver af dem.

**Prøven fangede det ikke, og det er værd at forstå hvorfor.** Den lavede to noter,
altså tre grupper, i et vindue på 720 pixels — og med så få grupper er der plads
nok til, at skrumpningen ikke bider. Fejlen kræver pres. Prøven gør vinduet lavt
nu og kigger efter, at rækkerne kan *ses* og ikke bare findes, og den siger
desuden hvor rulningen ligger: på kassen, ikke på listerne. Den er set fejle med
den gamle stil.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/e2e/smoke.spec.js

@@ -3366,6 +3366,35 @@ test('notelisten grupperer favoritter og datoer, også i arkivet', async ({ page
 	await expect(page.locator('h3.group')).toHaveCount(0);
 	await page.getByPlaceholder('Søg i noter').fill('');
 
+	// Rækkerne skal kunne *ses*, ikke bare findes.
+	//
+	// Da listen blev delt i grupper, blev hver gruppe sit eget `<ul>` — og dermed
+	// sit eget flex-element med `overflow-y: auto`. Flex-elementer skrumper som
+	// udgangspunkt, og et element, der skrumper og klipper, viser ingenting: alle
+	// overskrifter stod med deres tal, og der var ikke en eneste note under nogen af
+	// dem. Med tre grupper og en høj skærm var der plads nok til at det ikke skete,
+	// hvilket er hvorfor prøven herover ikke fangede det.
+	//
+	// Et lavt vindue fremtvinger presset. Tolv hundrede noter i tyve måneder gør det
+	// samme i virkeligheden.
+	await page.setViewportSize({ width: 1100, height: 380 });
+	await page.waitForTimeout(300);
+	await expect(
+		page.locator('li').filter({ hasText: 'Gruppe to' }).first(),
+		'rækkerne blev klippet væk, da der ikke var plads'
+	).toBeVisible();
+	// Og rulningen ligger på kassen om grupperne, ikke på hver liste for sig.
+	const scroller = await page
+		.locator('.list')
+		.evaluate((el) => getComputedStyle(el).overflowY);
+	expect(scroller, 'kassen om grupperne ruller ikke').toBe('auto');
+	const inner = await page
+		.locator('.list ul')
+		.first()
+		.evaluate((el) => getComputedStyle(el).overflowY);
+	expect(inner, 'den enkelte liste ruller stadig for sig').toBe('visible');
+	await page.setViewportSize({ width: 1280, height: 720 });
+
 	// Arkivet grupperes på samme måde. Det er dér, det betyder mest.
 	await row.hover();
 	await row.getByRole('button', { name: /Arkivér/i }).click();

web/src/routes/noter/+page.svelte

@@ -629,6 +629,14 @@
 				{query ? t('notes.noneFound') : showArchive ? t('notes.emptyArchive') : t('notes.noneYet')}
 			</p>
 		{:else}
+			<!-- Én rulleboks om alle grupperne.
+			     Før var der ét `<ul>`, og *det* rullede. Da listen blev delt i grupper,
+			     blev hver gruppe sit eget `<ul>` — og dermed sit eget flex-element med
+			     `overflow-y: auto`. Flex-elementer skrumper som udgangspunkt, og et
+			     element, der skrumper og klipper, viser ingenting: alle overskrifter
+			     stod med deres tal, og der var ikke en eneste note under nogen af dem.
+			     Rulningen hører til kassen om dem alle, ikke til hver af dem. -->
+			<div class="list">
 					{#each groups as group (group.key)}
 					<!-- Overskriften klæber, mens man ruller. Med tolv hundrede noter er det
 					     forskellen på at rulle og på at lede: man kan altid se, hvilken måned
@@ -722,6 +730,7 @@
 					</ul>
 				{/if}
 				{/each}
+			</div>
 		{/if}
 	</aside>
 
@@ -1007,12 +1016,18 @@
 		-webkit-appearance: none;
 	}
 
+	/* Kassen ruller. Listerne indeni gør ikke: de er mange nu, og et flex-element,
+	   der både skrumper og klipper, viser ingenting. */
+	.list {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
 	ul {
 		list-style: none;
 		margin: 0;
 		padding: 0;
-		overflow-y: auto;
-		min-height: 0;
 	}
 
 	/* Rækker uden for skærmen koster ingenting.