diff --git a/web/e2e/smoke.spec.js b/web/e2e/smoke.spec.js
index eb22939..c1eaa48 100644
--- a/web/e2e/smoke.spec.js
+++ b/web/e2e/smoke.spec.js
@@ -257,6 +257,25 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	await expect(heading).toBeVisible();
 	await expect(sidebar.getByText('Træk et projekt herop')).toBeVisible();
 
+	// The words in the heading must not sit on top of each other.
+	//
+	// Everything else here clicks by accessible name, which is exactly why this
+	// needs saying out loud: "Omdøb" and "Slet" once got the 20px square meant for
+	// the "+" icon beside "Projekter", overflowed it, and were drawn overlapping.
+	// Both buttons still worked, so every assertion in this file passed.
+	const boxes = await sidebar.locator('.folder-head').evaluate((el) =>
+		[...el.querySelectorAll('button')].map((b) => {
+			const r = b.getBoundingClientRect();
+			return { text: b.textContent.trim(), left: r.left, right: r.right };
+		})
+	);
+	for (let i = 1; i < boxes.length; i++) {
+		expect(
+			boxes[i].left,
+			`"${boxes[i - 1].text}" og "${boxes[i].text}" overlapper i gruppehovedet`
+		).toBeGreaterThanOrEqual(boxes[i - 1].right);
+	}
+
 	// Dragged in, then dragged back out onto "Projekter" — which is the reason
 	// that heading is a drop target at all: with every project filed away there
 	// would otherwise be no loose row left to aim at.
diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte
index 7d9e2dd..aabd263 100644
--- a/web/src/lib/components/Sidebar.svelte
+++ b/web/src/lib/components/Sidebar.svelte
@@ -380,6 +380,7 @@
 		>
 			<h2>Projekter</h2>
 			<button
+				class="icon"
 				onclick={() => {
 					adding = !adding;
 					addingGroup = false;
@@ -387,7 +388,7 @@
 				aria-label="Nyt projekt">+</button
 			>
 			<button
-				class="new-group"
+				class="icon new-group"
 				onclick={() => {
 					addingGroup = !addingGroup;
 					adding = false;
@@ -705,7 +706,12 @@
 		color: var(--ink-faint);
 	}
 
-	.group-head > button {
+	/* Only the square icon buttons — "+" and the folder — and asked for by class
+	   rather than by "a button in a heading". A group's heading also has Omdøb and
+	   Slet in it, and they are words: a selector that reached them squeezed both
+	   into a 20px box, where they overflowed and were drawn on top of each other.
+	   The class is the boundary, so the next text button added here is safe. */
+	.group-head > button.icon {
 		width: 20px;
 		height: 20px;
 		display: grid;
@@ -717,7 +723,7 @@
 		flex: none;
 	}
 
-	.group-head > button:hover {
+	.group-head > button.icon:hover {
 		color: var(--ink);
 		background: var(--surface-raised);
 	}