From 8d5dd1f1c30c187c05cb90add195f49b2090ab4c Mon Sep 17 00:00:00 2001
From: Kristian Wind <kw@KW-MacBook.local>
Date: Fri, 21 Aug 2026 13:00:15 +0200
Subject: [PATCH] =?UTF-8?q?fix(notes):=20grupperne=20stod=20tomme=20?=
 =?UTF-8?q?=E2=80=94=20hver=20liste=20rullede=20for=20sig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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             |  29 +++++
 web/src/routes/noter/+page.svelte | 199 ++++++++++++++++--------------
 2 files changed, 136 insertions(+), 92 deletions(-)

diff --git a/web/e2e/smoke.spec.js b/web/e2e/smoke.spec.js
index 793a5cd..27a3466 100644
--- a/web/e2e/smoke.spec.js
+++ b/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();
diff --git a/web/src/routes/noter/+page.svelte b/web/src/routes/noter/+page.svelte
index 7b24a32..a2f1454 100644
--- a/web/src/routes/noter/+page.svelte
+++ b/web/src/routes/noter/+page.svelte
@@ -629,99 +629,108 @@
 				{query ? t('notes.noneFound') : showArchive ? t('notes.emptyArchive') : t('notes.noneYet')}
 			</p>
 		{:else}
-			{#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
-				     man er nede i. -->
-				{#if !group.plain}
-					<h3 class="group">
-						<!-- Ingen `aria-label`. Den ville erstatte knappens indhold som dens
-						     navn, og knappen *er* overskriften — så overskriften ville hedde
-						     "Fold I dag sammen" i stedet for "I dag". `aria-expanded` siger
-						     tilstanden, som den gør på gruppehovederne i sidebjælken. -->
-						<button onclick={() => toggleGroup(group.key)} aria-expanded={!folded.has(group.key)}>
-							{#if group.star}
-								<span class="mark favmark" aria-hidden="true">★</span>
-							{:else}
-								<span class="mark" class:closed={folded.has(group.key)} aria-hidden="true">▾</span>
-							{/if}
-							{group.label}
-							<span class="count">{group.notes.length}</span>
-						</button>
-					</h3>
-				{/if}
-				{#if !folded.has(group.key)}
-					<ul>
-						{#each group.notes as note (note.id)}
-						<li>
-							<div class="rowline">
-								<button
-									class="row"
-									class:on={selectedId === note.id}
-									class:picked={picked.has(note.id)}
-									onclick={(e) => rowClick(e, note)}
-									draggable="true"
-									ondragstart={(e) => onDragStart(e, note)}
-									ondragend={() => (dragging = null)}
-								>
-									<!-- Titel og projekt på linje ét, uddrag på linje to. Datoen står
-									     i gruppens overskrift og ikke her — undtagen når der er sorteret
-									     på navn, for så er der ingen overskrift, der siger den, og så er
-									     den det eneste tilbage, der gør. -->
-									<span class="head">
-										<strong>{note.title || t('notes.untitled')}</strong>
-										{#if order === 'title'}
-											<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
-										{/if}
-										{#if note.project_id}
-											<!-- Projektets egen farve, den samme som prikken i sidebjælken.
-											     Mærkaten sagde det samme som alle de andre i en grå, der var
-											     lysere end uddraget — og projektet er dét, man skanner efter,
-											     når man leder i tolv hundrede noter. Nu kan Hjem kendes fra
-											     Claude uden at læse ordet. -->
-											<span class="filed" style="--project: {projectColour(note.project_id)}">
-												<span class="dot" aria-hidden="true"></span>
-												{projectName(note.project_id)}
-											</span>
-										{/if}
-									</span>
-									<span class="preview">{preview(note)}</span>
-								</button>
-								<!-- De to knapper står oven på hinanden i en smal søjle.
-								     Ved siden af hinanden tog de toogfyrre pixels af en liste,
-								     der er tre hundrede bred — og de bruges sjældent, mens
-								     titlen og uddraget læses hele tiden. -->
-								<div class="rowactions">
-								<!-- Én note lagt væk, uden at markere den først. Markeringen er
-								     til flere; det her er til den ene, man står med — og i
-								     arkivet er det vejen tilbage. -->
-								<button
-									class="archive-one"
-									onclick={() => archiveOne(note)}
-									aria-label={note.archived_at ? t('notes.unarchive') : t('notes.archiveOne')}
-									title={note.archived_at ? t('notes.unarchive') : t('notes.archiveOne')}
-								>
-									<svg viewBox="0 0 24 24" aria-hidden="true">
-										<path d="M3 7h18v3H3zM5 10v9h14v-9M10 14h4" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
-									</svg>
-								</button>
-								<button
-									class="star"
-									class:on={note.pinned}
-									onclick={() => favourite(note)}
-									aria-pressed={note.pinned}
-									aria-label={note.pinned ? t('notes.unfavourite') : t('notes.favourite')}
-									title={note.pinned ? t('notes.unfavourite') : t('notes.favourite')}
-								>
-									{note.pinned ? '★' : '☆'}
-								</button>
+			<!-- É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
+					     man er nede i. -->
+					{#if !group.plain}
+						<h3 class="group">
+							<!-- Ingen `aria-label`. Den ville erstatte knappens indhold som dens
+							     navn, og knappen *er* overskriften — så overskriften ville hedde
+							     "Fold I dag sammen" i stedet for "I dag". `aria-expanded` siger
+							     tilstanden, som den gør på gruppehovederne i sidebjælken. -->
+							<button onclick={() => toggleGroup(group.key)} aria-expanded={!folded.has(group.key)}>
+								{#if group.star}
+									<span class="mark favmark" aria-hidden="true">★</span>
+								{:else}
+									<span class="mark" class:closed={folded.has(group.key)} aria-hidden="true">▾</span>
+								{/if}
+								{group.label}
+								<span class="count">{group.notes.length}</span>
+							</button>
+						</h3>
+					{/if}
+					{#if !folded.has(group.key)}
+						<ul>
+							{#each group.notes as note (note.id)}
+							<li>
+								<div class="rowline">
+									<button
+										class="row"
+										class:on={selectedId === note.id}
+										class:picked={picked.has(note.id)}
+										onclick={(e) => rowClick(e, note)}
+										draggable="true"
+										ondragstart={(e) => onDragStart(e, note)}
+										ondragend={() => (dragging = null)}
+									>
+										<!-- Titel og projekt på linje ét, uddrag på linje to. Datoen står
+										     i gruppens overskrift og ikke her — undtagen når der er sorteret
+										     på navn, for så er der ingen overskrift, der siger den, og så er
+										     den det eneste tilbage, der gør. -->
+										<span class="head">
+											<strong>{note.title || t('notes.untitled')}</strong>
+											{#if order === 'title'}
+												<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
+											{/if}
+											{#if note.project_id}
+												<!-- Projektets egen farve, den samme som prikken i sidebjælken.
+												     Mærkaten sagde det samme som alle de andre i en grå, der var
+												     lysere end uddraget — og projektet er dét, man skanner efter,
+												     når man leder i tolv hundrede noter. Nu kan Hjem kendes fra
+												     Claude uden at læse ordet. -->
+												<span class="filed" style="--project: {projectColour(note.project_id)}">
+													<span class="dot" aria-hidden="true"></span>
+													{projectName(note.project_id)}
+												</span>
+											{/if}
+										</span>
+										<span class="preview">{preview(note)}</span>
+									</button>
+									<!-- De to knapper står oven på hinanden i en smal søjle.
+									     Ved siden af hinanden tog de toogfyrre pixels af en liste,
+									     der er tre hundrede bred — og de bruges sjældent, mens
+									     titlen og uddraget læses hele tiden. -->
+									<div class="rowactions">
+									<!-- Én note lagt væk, uden at markere den først. Markeringen er
+									     til flere; det her er til den ene, man står med — og i
+									     arkivet er det vejen tilbage. -->
+									<button
+										class="archive-one"
+										onclick={() => archiveOne(note)}
+										aria-label={note.archived_at ? t('notes.unarchive') : t('notes.archiveOne')}
+										title={note.archived_at ? t('notes.unarchive') : t('notes.archiveOne')}
+									>
+										<svg viewBox="0 0 24 24" aria-hidden="true">
+											<path d="M3 7h18v3H3zM5 10v9h14v-9M10 14h4" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+										</svg>
+									</button>
+									<button
+										class="star"
+										class:on={note.pinned}
+										onclick={() => favourite(note)}
+										aria-pressed={note.pinned}
+										aria-label={note.pinned ? t('notes.unfavourite') : t('notes.favourite')}
+										title={note.pinned ? t('notes.unfavourite') : t('notes.favourite')}
+									>
+										{note.pinned ? '★' : '☆'}
+									</button>
+									</div>
 								</div>
-							</div>
-						</li>
-						{/each}
+							</li>
+							{/each}
 					</ul>
 				{/if}
-			{/each}
+				{/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.