fix(sidebar): en gruppe står nu hvor projekterne står, og hedder hele sit navn

To fejl i samme række. "Omdøb" og "Slet" lå i flowet og optog deres bredde også
usynlige, så ARBEJDE blev tegnet som "ARBE"; de ligger nu over rækkens højre
ende og dukker op ved hover. Og chevronen sad før navnet og skubbede en gruppe
toogtyve pixels længere ind end de projekter, den indeholder — så en gruppe så
ud til at ligge under dem. Den deler nu plads med gruppens prik: prikken hviler,
chevronen tager over ved hover, og bliver stående mens gruppen er foldet.

De sidste otte pixels sad i a-reglen, som giver hvert link i sidebjælken sin
egen venstrepolstring oven i rækkens.

Prøven, der holdt øje med rækken, målte at alt lå side om side — hvilket var
netop den geometri, der skulle laves om. Den måler nu det, der blev bedt om:
at navnet kan læses helt, og at gruppens prik står præcis hvor et projekts gør.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kristian Wind
2026-08-18 18:10:34 +02:00
co-authored by Claude Opus 5
parent dab1827c14
commit bb25b94f96
2 changed files with 93 additions and 21 deletions
+34 -19
View File
@@ -302,26 +302,41 @@ 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.
// A group's name must be readable in full, and must start where a project's
// name starts.
//
// 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) =>
// Links as well as buttons: the group's name is a link to its page now, and
// a measurement that skipped it would miss the widest thing in the row.
[...el.querySelectorAll('button, a')].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);
}
// Both halves are here because both were once broken at the same time and for
// different reasons. "Omdøb" and "Slet" sat in the flow reserving their width
// even while invisible, so ARBEJDE was drawn as "ARBE"; and the fold chevron
// sat before the name, pushing a group 22px further in than the projects it
// contains — so a group read as if it were filed under them. Every assertion
// in this file passed through both, because both buttons still worked.
const shape = await sidebar.locator('.folder-head').evaluate((el) => {
const link = el.querySelector('h2 a');
const name = { ...link.querySelector('.dot').getBoundingClientRect().toJSON() };
// The last child of the link is the name itself; the dot is a span before it.
return {
clipped: link.scrollWidth > link.clientWidth + 1,
left: name.left,
right: link.getBoundingClientRect().right,
count: el.querySelector('.count')?.getBoundingClientRect().left ?? Infinity
};
});
expect(shape.clipped, 'gruppens navn bliver klippet').toBe(false);
expect(shape.count, 'navnet og tallet overlapper').toBeGreaterThanOrEqual(shape.right);
// Measured dot to dot, not box to box: both rows begin with the same coloured
// mark, and it is the only thing in them that means the same on both sides.
// Comparing the group's inner link with the project's outer box reported the
// row's own padding as a misalignment.
const projectLeft = await sidebar
.getByRole('link', { name: 'Regnskab' })
.evaluate((el) => el.querySelector('.dot').getBoundingClientRect().left);
expect(
Math.abs(shape.left - projectLeft),
`gruppen starter ${Math.round(shape.left - projectLeft)}px fra projekterne`
).toBeLessThanOrEqual(2);
// 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