mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 21:32:18 +00:00
fix(labs): keep the trend column as wide as its sparkline on a wide list
The wide tier let the trend column grow to 8rem while the sparkline it holds is a fixed 72px glyph, so at 1920 px an empty 56 px strip opened between the sparkline and the chevron. The column now stays 72px in both tiers; the extra width goes to the range bar and the name, as before. The wide-list spec reads the resolved grid tracks and asserts the trend track is 72px at every width it covers.
This commit is contained in:
1 parent
0ae50849d8
commit
29798a76e3
3 files changed
+24
-5
No files matched your search
@@ -19,7 +19,8 @@ import {
|
||||
*
|
||||
* - below 64 rem of card the row is the `lg` table it always was, and the
|
||||
* range bar keeps its 12 rem;
|
||||
* - from 64 rem the bar follows its column up to 18 rem.
|
||||
* - from 64 rem the bar follows its column up to 18 rem, and the trend
|
||||
* column stays as wide as its 72 px sparkline.
|
||||
*
|
||||
* From `lg` a long name wraps instead of being cut off. The tiers are measured
|
||||
* on the card's width and not the viewport's, so the spec reads the card and
|
||||
@@ -94,6 +95,16 @@ test.describe("the lab list uses its width", () => {
|
||||
}
|
||||
}
|
||||
|
||||
// The trend column is exactly as wide as the sparkline it holds, in both
|
||||
// tiers. The sparkline is a fixed 72 px glyph; a wider column would only
|
||||
// open an empty strip between it and the chevron.
|
||||
const tracks = await page
|
||||
.locator('[data-slot="lab-list"] [data-slot="card-content"]')
|
||||
.first()
|
||||
.evaluate((node) => getComputedStyle(node).gridTemplateColumns);
|
||||
const trendTrack = tracks.split(" ")[3];
|
||||
expect(trendTrack, `trend column in "${tracks}"`).toBe("72px");
|
||||
|
||||
// The widest windows must actually reach the wide tier, or the branch
|
||||
// above never ran.
|
||||
if (width >= 1920) {
|
||||
|
||||
Reference in new issue
Block a user