mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
style(admin): reduce excessive vertical whitespace on Zielwerte page
Marc reported "relativ viel Platz" wasted between the overview header and the first cards on `/targets` (Zielwerte). The page used `space-y-8` (32 px) on the outer wrapper, which leaves an oversized gap between the intro paragraph and the first card. Tighten to `space-y-6` (24 px) — same rhythm the admin and settings pages use, so the whole app shares one Dracula-spacing beat. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
7a70db6c86
commit
6507646a90
2 files changed
+70
-1
No files matched your search
@@ -0,0 +1,65 @@
|
|||||||
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
import { renderToStaticMarkup } from "react-dom/server";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* v1.4.19 phase A7 — `/targets` (Zielwerte) had `space-y-8` between
|
||||||
|
* the page header (h1 + intro) and the first card grid. At Pixel-5
|
||||||
|
* Marc reported "relativ viel Platz" wasted between the overview
|
||||||
|
* and the first values. Tighten the rhythm to `space-y-6` (24px)
|
||||||
|
* which matches the rest of the admin / settings pages.
|
||||||
|
*/
|
||||||
|
|
||||||
|
vi.mock("next/navigation", () => ({
|
||||||
|
useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
|
||||||
|
usePathname: () => "/targets",
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@tanstack/react-query", () => ({
|
||||||
|
useQuery: () => ({
|
||||||
|
data: {
|
||||||
|
targets: [],
|
||||||
|
bpDiastolic: { current: null, average30: null, range: null },
|
||||||
|
profile: { heightCm: null, age: null, gender: null, glucoseUnit: null },
|
||||||
|
},
|
||||||
|
isLoading: false,
|
||||||
|
isError: false,
|
||||||
|
refetch: vi.fn(),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@/hooks/use-auth", () => ({
|
||||||
|
useAuth: () => ({
|
||||||
|
user: {
|
||||||
|
id: "u1",
|
||||||
|
username: "marc",
|
||||||
|
email: "marc@example.com",
|
||||||
|
role: "USER",
|
||||||
|
},
|
||||||
|
isAuthenticated: true,
|
||||||
|
isLoading: false,
|
||||||
|
refetch: vi.fn(),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { I18nProvider } from "@/lib/i18n/context";
|
||||||
|
import TargetsPage from "../targets/page";
|
||||||
|
|
||||||
|
function render(locale: "en" | "de" = "en") {
|
||||||
|
return renderToStaticMarkup(
|
||||||
|
<I18nProvider initialLocale={locale}>
|
||||||
|
<TargetsPage />
|
||||||
|
</I18nProvider>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("/targets page — vertical spacing", () => {
|
||||||
|
it("uses space-y-6 (not space-y-8) between header and card grid", () => {
|
||||||
|
const html = render();
|
||||||
|
// Outer wrapper rhythm. `space-y-8` would leave ~32px of
|
||||||
|
// unnecessary breathing room between the intro paragraph and the
|
||||||
|
// first card; `space-y-6` (24px) brings it in line with the
|
||||||
|
// admin / settings pages.
|
||||||
|
expect(html).toMatch(/<div[^>]*\bspace-y-6\b/);
|
||||||
|
expect(html).not.toMatch(/<div[^>]*\bspace-y-8\b/);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -549,7 +549,11 @@ export default function TargetsPage() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
// v1.4.19 phase A7 — Marc reported "relativ viel Platz" wasted
|
||||||
|
// between the overview header and the first values on `/targets`.
|
||||||
|
// Tighten the rhythm from `space-y-8` (32 px) to `space-y-6`
|
||||||
|
// (24 px) — that matches the admin / settings pages.
|
||||||
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold">{t("targets.title")}</h1>
|
<h1 className="text-2xl font-bold">{t("targets.title")}</h1>
|
||||||
<p className="mt-2 text-sm">{t("targets.introText")}</p>
|
<p className="mt-2 text-sm">{t("targets.introText")}</p>
|
||||||
|
|||||||
Reference in new issue
Block a user