From a8b453843df6332f63dd0b8bece050c253063339 Mon Sep 17 00:00:00 2001 From: Kristian Wind Date: Mon, 17 Aug 2026 20:53:14 +0200 Subject: [PATCH] =?UTF-8?q?fix(sidebar):=20Omd=C3=B8b=20og=20Slet=20l?= =?UTF-8?q?=C3=A5=20oven=20i=20hinanden=20i=20et=20gruppehoved?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "+" beside "Projekter" is a 20px square icon button, and the rule that makes it one was written as `.group-head > button`. A group's heading is also a `.group-head`, and it has two buttons in it that are words rather than icons — so Omdøb and Slet were each squeezed into a 20px box, where they overflowed and were drawn on top of each other. They still worked. Every assertion in the smoke test clicks by accessible name, which is unaffected by a button being the wrong size, so the whole suite passed on a heading that read "0 Om…Slet". It took a screenshot from somebody actually using it. The selector now asks for the class instead of for "a button in a heading", so the next text button added there is safe by default rather than by remembering. And the smoke test measures the row: each button must start at or after the previous one's right edge. A layout assertion is unusual here on purpose — the rest of the file deliberately tests behaviour — but this is a failure mode behaviour cannot see. Co-Authored-By: Claude Opus 5 --- web/e2e/smoke.spec.js | 19 +++++++++++++++++++ web/src/lib/components/Sidebar.svelte | 12 +++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) 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 @@ >

Projekter