diff --git a/src/app/page.tsx b/src/app/page.tsx index b2afb0f6d..898067460 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1211,6 +1211,14 @@ export default function DashboardPage() { // branch above `sm:`. className={cn( "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2", + // v1.4.29 — fixed mobile tile height contract. + // At ` (
{entry.node}
diff --git a/src/components/charts/__tests__/trend-card-tile-height.test.tsx b/src/components/charts/__tests__/trend-card-tile-height.test.tsx new file mode 100644 index 000000000..d9247a400 --- /dev/null +++ b/src/components/charts/__tests__/trend-card-tile-height.test.tsx @@ -0,0 +1,65 @@ +import { describe, it, expect } from "vitest"; +import { renderToStaticMarkup } from "react-dom/server"; +import { Activity } from "lucide-react"; + +import { TrendCard } from "../trend-card"; +import { I18nProvider } from "@/lib/i18n/context"; + +/** + * v1.4.29 — mobile tile equal-height contract. + * + * On `{node}, + ); +} + +describe(" mobile tile equal-height contract", () => { + const baseProps = { + label: "Pulse", + latest: 72, + unit: "bpm", + avg7: 70, + avg30: 71, + icon: Activity, + slope30: RISING, + }; + + it("renders the callout slot with min-h-[18px] reserved", () => { + const html = render(); + // The callout slot wrapper sits between value row + sub-rows and + // reserves a fixed minimum height so sibling tiles don't drift + // when the callout is absent. + expect(html).toContain("min-h-[18px]"); + }); + + it("clamps the comparison callout to one line at { + const html = render( + , + ); + expect(html).toContain("line-clamp-1"); + expect(html).toContain('data-slot="tile-compare-delta"'); + }); + + it("renders the sub-row pair with flex-nowrap + overflow-hidden", () => { + const html = render(); + expect(html).toContain("flex-nowrap"); + expect(html).toContain("overflow-hidden"); + }); +}); diff --git a/src/components/charts/trend-card.tsx b/src/components/charts/trend-card.tsx index 6e1512aef..555dc6f34 100644 --- a/src/components/charts/trend-card.tsx +++ b/src/components/charts/trend-card.tsx @@ -265,11 +265,16 @@ export function TrendCard({ flex-wrap on the sibling row + this callout's `mt-1` horizontal-row layout absorb the overflow without crowding the headline value above. */} - {compareBaseline !== "none" && compareDelta != null && ( -
+ {/* v1.4.29 — clamp the callout to one line at ` + {compareBaseline !== "none" && compareDelta != null && ( -
- )} + )} + -
+ {/* v1.4.29 — sub-row pair clips rather than wraps at ` {t(avg7LabelKey)}:{" "} {avg7Hint ? (