fix(dashboard): keep the gap under the top card

This commit is contained in:
Marc-André Bombeck committed 2026-10-10 13:21:59 +02:00
1 parent f0b4e902bb
commit 01aa4e5ba1
2 files changed
+29 -28

No files matched your search

+9 -8
View File
@@ -314,13 +314,14 @@ test.describe("the dashboard's top card", () => {
}),
);
// The card's region, present whenever the card is switched on. What it
// shows depends on the day's digest, which the server renders into the
// page before any route mock can answer, so the switch is asserted on
// the region and not on its content.
const hero = page.locator('[data-slot="today-card"]');
// The dashboard states the switch on its root. What the card shows
// depends on the day's digest, which the server renders into the page
// before any route mock can answer, so the switch is asserted there and
// not on the card's content.
const dashboard = page.locator("[data-today-card]");
const hero = page.locator('[data-slot="today-hero"]');
await page.goto("/");
await expect(hero).toHaveCount(1);
await expect(dashboard).toHaveAttribute("data-today-card", "on");
async function flip(expected: "checked" | "unchecked") {
await page.goto("/settings/layout/dashboard");
@@ -346,7 +347,7 @@ test.describe("the dashboard's top card", () => {
await flip("unchecked");
await page.goto("/");
await expect(page.locator("main").first()).toBeVisible();
await expect(dashboard).toHaveAttribute("data-today-card", "off");
await expect(hero).toHaveCount(0);
await expect(page.locator('[data-slot="today-hero-skeleton"]')).toHaveCount(
0,
@@ -360,6 +361,6 @@ test.describe("the dashboard's top card", () => {
await flip("checked");
await page.goto("/");
await expect(hero).toHaveCount(1);
await expect(dashboard).toHaveAttribute("data-today-card", "on");
});
});
+20 -20
View File
@@ -930,7 +930,12 @@ export default function DashboardPageClient({
(snapshotEnabled ? snapshotQuery.isLoading : analyticsSlimQuery.isLoading);
return (
<div className="space-y-6">
<div
className="space-y-6"
// The switch in the layout settings, for the e2e check: the card
// itself renders nothing on a day without a digest.
data-today-card={layout.todayCardVisible === false ? "off" : "on"}
>
<PullToRefreshIndicator {...pull} />
<DashboardHeader onQuickEntry={setQuickEntryDialog} />
<KeyBackupBanner isAdmin={user?.role === "ADMIN"} />
@@ -971,25 +976,20 @@ export default function DashboardPageClient({
// v1.42 — the top card can be switched off in the layout settings;
// only an explicit `false` hides it, and with it its skeleton and
// its error card.
layout.todayCardVisible === false ? null : (
// `contents`: a stable hook for the switch, no box of its own.
<div data-slot="today-card" className="contents">
{digestQuery.data ? (
<TodayHero
digest={digestQuery.data}
renderFilteredAllClear={renderFilteredHeroAllClear}
// Server-persisted hero choice — rides the same resolved
// layout as the widget visibility below, so SSR and
// hydration agree.
primaryContent={layout.hero ?? "score"}
/>
) : !mounted || digestQuery.isLoading ? (
<TodayHeroSkeleton />
) : digestQuery.isError ? (
<QueryErrorCard onRetry={() => digestQuery.refetch()} />
) : null}
</div>
)
layout.todayCardVisible === false ? null : digestQuery.data ? (
<TodayHero
digest={digestQuery.data}
renderFilteredAllClear={renderFilteredHeroAllClear}
// Server-persisted hero choice — rides the same resolved
// layout as the widget visibility below, so SSR and
// hydration agree.
primaryContent={layout.hero ?? "score"}
/>
) : !mounted || digestQuery.isLoading ? (
<TodayHeroSkeleton />
) : digestQuery.isError ? (
<QueryErrorCard onRetry={() => digestQuery.refetch()} />
) : null
}
{/* v1.42 (#615) — a quiet note about the newest stored environment