@openshift-migration-advisor/shared-components 0.27.0 → 0.28.0-16fc442157c1

package/src/report/__tests__/CpuAndMemoryOverview.test.tsx

@@ -0,0 +1,200 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { CpuAndMemoryOverview } from "../CpuAndMemoryOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="cpu-memory-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a CPU and memory donut to render");
+  }
+  return props;
+};
+
+describe("CpuAndMemoryOverview", () => {
+  it("shows the memory empty state when no memory tiers were collected", () => {
+    render(<CpuAndMemoryOverview />);
+
+    expect(screen.getByText("CPU & memory")).toBeInTheDocument();
+    expect(screen.getByText("Memory size tiers")).toBeInTheDocument();
+    expect(screen.getByText("Memory data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("cpu-memory-donut")).not.toBeInTheDocument();
+  });
+
+  it("plots memory tiers from a plain count map and appends GB", () => {
+    render(
+      <CpuAndMemoryOverview
+        memoryTierDistribution={{
+          "129-256": 1,
+          "0-4": 2,
+          "256+": 3,
+          "5-16 GB": 4,
+          "17–32": 5,
+          unused: 0,
+        }}
+        memoryTotalGB={1024}
+      />,
+    );
+
+    const props = renderedDonut();
+    expect(props.title).toBe("15 VMs");
+    expect(props.subTitle).toBe(`${(1024).toLocaleString()} GB`);
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["0-4 GB", 2],
+      ["5-16 GB", 4],
+      ["17–32 GB", 5],
+      ["129-256 GB", 1],
+      ["256+ GB", 3],
+    ]);
+    expect(props.data.map((slice) => slice.legendCategory)).toEqual([
+      "0-4",
+      "5-16 GB",
+      "17–32",
+      "129-256",
+      "256+",
+    ]);
+    expect(props.legend).toEqual({
+      "0-4": "#0066cc",
+      "5-16 GB": "#5e40be",
+      "17–32": "#b6a6e9",
+      "129-256": "#73c5c5",
+      "256+": "#b98412",
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.marginLeft).toBeUndefined();
+    expect(props.onItemClick).toBeUndefined();
+    expect(props.onTitleClick).toBeUndefined();
+    expect(
+      props.legendLabelFormatter?.({ x: "0-4 GB", countDisplay: "2 VMs" }),
+    ).toBe("0-4 GB (2 VMs)");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "0-4 GB",
+          y: 2,
+          countDisplay: "2 VMs",
+          legendCategory: "0-4",
+        },
+        percent: 13.333,
+        total: 15,
+      }),
+    ).toBe("2 VMs\n13.3%");
+  });
+
+  it("calls onTierSelect with the memory distribution key", () => {
+    const onTierSelect = vi.fn();
+    const onTitleClick = vi.fn();
+    render(
+      <CpuAndMemoryOverview
+        memoryTierDistribution={{ "0-4": 2 }}
+        onTierSelect={onTierSelect}
+        onTitleClick={onTitleClick}
+      />,
+    );
+
+    renderedDonut().onItemClick?.({
+      name: "0-4 GB",
+      count: 2,
+      legendCategory: "0-4",
+    });
+    renderedDonut().onTitleClick?.();
+
+    expect(onTierSelect).toHaveBeenCalledTimes(1);
+    expect(onTierSelect).toHaveBeenCalledWith("0-4");
+    expect(onTitleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("switches to vCPU tiers and omits slice clicks", async () => {
+    const user = userEvent.setup();
+    const onTierSelect = vi.fn();
+    render(
+      <CpuAndMemoryOverview
+        legendVariant="chart"
+        cpuTierDistribution={{
+          "8": 1,
+          "2 cores": 2,
+          "1-2": 4,
+          "4+": 1,
+          idle: 0,
+        }}
+        cpuTotalCores={64}
+        memoryTierDistribution={{ "0-4": 2 }}
+        onTierSelect={onTierSelect}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", {
+        name: "VM distribution by memory size tier",
+      }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", {
+        name: "VM distribution by vCPU count tier",
+      }),
+    );
+
+    expect(screen.getByText("vCPU count tiers")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: "VM distribution by vCPU count tier",
+      }),
+    ).toBeInTheDocument();
+
+    const props = renderedDonut();
+    expect(props.title).toBe("8 VMs");
+    expect(props.subTitle).toBe(`${(64).toLocaleString()} Cores`);
+    expect(props.legendVariant).toBe("chart");
+    expect(props.marginLeft).toBe("52%");
+    expect(props.labelFontSize).toBe(18);
+    expect(props.itemsPerRow).toBe(2);
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["1-2 cores", 4],
+      ["2 cores", 2],
+      ["4+ cores", 1],
+      ["8 cores", 1],
+    ]);
+    expect(props.onItemClick).toBeUndefined();
+  });
+
+  it("shows the CPU empty state when the selected distribution is empty", async () => {
+    const user = userEvent.setup();
+    render(<CpuAndMemoryOverview cpuTierDistribution={{}} />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: "VM distribution by memory size tier",
+      }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", {
+        name: "VM distribution by vCPU count tier",
+      }),
+    );
+
+    expect(screen.getByText("CPU data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("cpu-memory-donut")).not.toBeInTheDocument();
+  });
+});

package/src/report/__tests__/captureChartElement.test.ts

@@ -16,6 +16,12 @@ const mockedHtml2Canvas = vi.mocked(html2canvas);
 afterEach(() => {
   mockedHtml2Canvas.mockClear();
   document.body.replaceChildren();
+  document.documentElement.classList.remove(
+    "pf-v6-theme-dark",
+    "pf-v5-theme-dark",
+  );
+  document.documentElement.style.colorScheme = "";
+  document.body.style.colorScheme = "";
 });
 
 describe("captureChartElement", () => {
@@ -129,4 +135,118 @@ describe("captureChartElement", () => {
 
     await captureChartElement(root);
   });
+
+  it("applies light theme on the clone and leaves the live document dark", async () => {
+    document.documentElement.classList.add("pf-v6-theme-dark");
+    const root = document.createElement("div");
+    const card = document.createElement("div");
+    card.className = "pf-v6-c-card";
+    card.style.backgroundColor = "rgb(30, 30, 30)";
+    card.style.border = "1px solid rgb(80, 80, 80)";
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    text.style.fill = "rgb(255, 255, 255)";
+    text.textContent = "42";
+    svg.append(text);
+    card.append(svg);
+    root.append(card);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      expect(
+        document.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(true);
+
+      const clonedDoc = document.implementation.createHTMLDocument("export");
+      clonedDoc.documentElement.classList.add("pf-v6-theme-dark");
+      const cloneRoot = clonedDoc.createElement("div");
+      const cloneCard = clonedDoc.createElement("div");
+      cloneCard.className = "pf-v6-c-card";
+      cloneCard.style.backgroundColor = "rgb(30, 30, 30)";
+      const cloneSvg = clonedDoc.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+      );
+      const cloneText = clonedDoc.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text",
+      );
+      cloneText.style.fill = "rgb(255, 255, 255)";
+      cloneSvg.append(cloneText);
+      cloneCard.append(cloneSvg);
+      cloneRoot.append(cloneCard);
+      clonedDoc.body.append(cloneRoot);
+
+      await options?.onclone?.(clonedDoc, cloneRoot);
+
+      expect(
+        clonedDoc.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(false);
+      expect(
+        document.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(true);
+      expect(cloneCard.style.backgroundColor).toBe("rgb(255, 255, 255)");
+      expect(cloneCard.style.borderColor).toBe("rgb(224, 224, 224)");
+      expect(cloneText.style.fill).toBe("rgb(21, 21, 21)");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+
+    expect(
+      document.documentElement.classList.contains("pf-v6-theme-dark"),
+    ).toBe(true);
+    expect(card.style.backgroundColor).toBe("rgb(30, 30, 30)");
+  });
+
+  it("relights tables and labels via the clone cascade, not by hand-painting them", async () => {
+    document.documentElement.classList.add("pf-v6-theme-dark");
+    const root = document.createElement("div");
+    const label = document.createElement("span");
+    label.className = "pf-v6-c-label pf-m-compact pf-m-outline";
+    const labelContent = document.createElement("span");
+    labelContent.className = "pf-v6-c-label__content";
+    label.append(labelContent);
+    root.append(label);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      const clonedDoc = document.implementation.createHTMLDocument("export");
+      clonedDoc.documentElement.classList.add("pf-v6-theme-dark");
+      const cloneRoot = clonedDoc.createElement("div");
+      const cloneTh = clonedDoc.createElement("th");
+      cloneTh.className = "pf-v6-c-table__th";
+      const cloneLabelContent = clonedDoc.createElement("span");
+      cloneLabelContent.className = "pf-v6-c-label__content";
+      cloneRoot.append(cloneTh, cloneLabelContent);
+      clonedDoc.body.append(cloneRoot);
+
+      await options?.onclone?.(clonedDoc, cloneRoot);
+
+      // Dropping the dark class off the clone root is what relights these
+      // surfaces — the cascade does the work. We must NOT hand-paint inline
+      // colors onto PatternFly table/label nodes, and the live page stays dark.
+      expect(
+        clonedDoc.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(false);
+      expect(cloneTh.style.backgroundColor).toBe("");
+      expect(cloneLabelContent.style.backgroundColor).toBe("");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+
+    expect(
+      document.documentElement.classList.contains("pf-v6-theme-dark"),
+    ).toBe(true);
+    expect(labelContent.style.backgroundColor).toBe("");
+  });
 });

package/src/report/__tests__/chartExportPackagers.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  applyLightThemeToDocument,
   chartExportViewsFromLabels,
   restoreChartExportViews,
   sortRegisteredChartsByDocumentOrder,
@@ -7,6 +8,7 @@ import {
 } from "../chartExport.js";
 import { getChartExportFilename } from "../chartExportFilenames.js";
 import { buildHtmlReport, escapeHtml } from "../htmlExport.js";
+import { buildPdfFromCharts } from "../pdfExport.js";
 import {
   fitPdfImageSize,
   placePdfBlock,
@@ -198,6 +200,63 @@ describe("placePdfBlock", () => {
   });
 });
 
+describe("buildPdfFromCharts with extra text pages", () => {
+  it("appends a text page even when there are no chart captures", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations",
+        items: [
+          { label: "Cluster name", value: "cluster-1" },
+          { label: "Target platform", value: "Bare metal" },
+          {
+            label: "Total nodes",
+            value: "6 (3 workers + 3 control plane)",
+          },
+          { label: "Failover capacity", value: "1 failover nodes" },
+          { label: "Worker node size", value: "8 CPU, 32 GB memory" },
+          {
+            label: "Control plane node size",
+            value: "16 CPU, 64 GB memory",
+          },
+        ],
+        footer: "Note: estimates only.",
+      },
+    ]);
+
+    expect(blob).toBeInstanceOf(Blob);
+    expect(blob.size).toBeGreaterThan(0);
+    expect(blob.type).toBe("application/pdf");
+  });
+
+  it("paginates extra pages with many rows without throwing", async () => {
+    const manyItems = Array.from({ length: 60 }, (_, index) => ({
+      label: `Field ${index}`,
+      value: `Value ${index}`,
+    }));
+
+    const blob = await buildPdfFromCharts([], "Report", [
+      { title: "Cluster sizing recommendations", items: manyItems },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+
+  it("supports multiple extra pages (e.g. one per sized cluster)", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations — cluster-a",
+        items: [{ label: "Cluster name", value: "cluster-a" }],
+      },
+      {
+        title: "Cluster sizing recommendations — cluster-b",
+        items: [{ label: "Cluster name", value: "cluster-b" }],
+      },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+});
+
 describe("buildHtmlReport", () => {
   it("embeds captured chart images and escapes the title", () => {
     const html = buildHtmlReport(
@@ -222,3 +281,19 @@ describe("buildHtmlReport", () => {
     expect(escapeHtml("it's")).toBe("it's");
   });
 });
+
+describe("applyLightThemeToDocument", () => {
+  it("removes PatternFly dark theme classes from the given document", () => {
+    const clone = document.implementation.createHTMLDocument("export");
+    clone.documentElement.classList.add("pf-v6-theme-dark");
+    clone.body.style.colorScheme = "dark";
+
+    applyLightThemeToDocument(clone);
+
+    expect(clone.documentElement.classList.contains("pf-v6-theme-dark")).toBe(
+      false,
+    );
+    expect(clone.documentElement.style.colorScheme).toBe("light");
+    expect(clone.body.style.colorScheme).toBe("light");
+  });
+});

package/src/report/captureChartElement.ts

@@ -1,12 +1,25 @@
+import {
+  t_color_gray_20,
+  t_color_white,
+  t_global_text_color_regular,
+} from "@patternfly/react-tokens";
 import html2canvas from "html2canvas-pro";
 import {
+  applyLightThemeToDocument,
   CHART_EXPORT_CAPTURING_ATTR,
   CHART_EXPORT_SCROLL_ATTR,
   shouldIgnoreChartExportElement,
 } from "./chartExport.js";
 
-/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
-const CHART_CAPTURE_SCALE = 1;
+/** Default scale for bulk exports; single-chart PNG uses a higher scale. */
+const CHART_CAPTURE_SCALE_DEFAULT = 1;
+export const CHART_CAPTURE_SCALE_SINGLE = 2;
+const EXPORT_FONT_FAMILY = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
+
+export type CaptureChartElementOptions = {
+  /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+  scale?: number;
+};
 const HIDDEN_LAYOUT_STYLE_KEYS = [
   "display",
   "position",
@@ -94,6 +107,10 @@ const PADDED_CAPTURE_SELECTOR =
   ".pf-v6-c-card__title, .pf-v6-c-card__header, .pf-v6-c-card__body";
 const CARD_CAPTURE_SELECTOR = ".pf-v6-c-card";
 const TRANSPARENT_FILLS = new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+/** PatternFly light-theme chrome. html2canvas inlines live computed SVG styles. */
+const LIGHT_EXPORT_BACKGROUND = t_color_white.value;
+const LIGHT_EXPORT_BORDER = t_color_gray_20.value;
+const LIGHT_EXPORT_TEXT = t_global_text_color_regular.value;
 
 function queryCards(root: HTMLElement): HTMLElement[] {
   const cards = Array.from(
@@ -149,16 +166,35 @@ function readCardBorder(source: HTMLElement): {
   return { width, style, color };
 }
 
-function applyCardChrome(source: HTMLElement, dest: HTMLElement): void {
+function applyCardChrome(
+  source: HTMLElement,
+  dest: HTMLElement,
+  colors: "computed" | "light",
+): void {
   const computed = window.getComputedStyle(source);
   dest.style.borderRadius = computed.borderRadius;
-  dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
   dest.style.overflow = "hidden";
+  dest.style.backgroundColor =
+    colors === "light"
+      ? LIGHT_EXPORT_BACKGROUND
+      : resolvedFill(computed.backgroundColor);
   const border = readCardBorder(source);
   if (border) {
     dest.style.borderWidth = border.width;
     dest.style.borderStyle = border.style;
-    dest.style.borderColor = border.color;
+    dest.style.borderColor =
+      colors === "light" ? LIGHT_EXPORT_BORDER : border.color;
+  }
+}
+
+function applyLightThemeSvgText(root: HTMLElement): void {
+  for (const node of root.querySelectorAll("text, tspan")) {
+    if (!(node instanceof SVGElement)) {
+      continue;
+    }
+    node.style.fill = LIGHT_EXPORT_TEXT;
+    node.style.color = LIGHT_EXPORT_TEXT;
+    node.style.fontFamily = EXPORT_FONT_FAMILY;
   }
 }
 
@@ -218,7 +254,7 @@ function copyCardChrome(node: HTMLElement): {
     height: node.style.height,
     maxHeight: node.style.maxHeight,
   };
-  applyCardChrome(node, node);
+  applyCardChrome(node, node, "computed");
   node.style.minHeight = "0px";
   node.style.height = "auto";
   node.style.maxHeight = "none";
@@ -234,7 +270,7 @@ function applyComputedStylesToClone(
   sourceCards.forEach((source, index) => {
     const dest = cloneCards[index];
     if (dest) {
-      applyCardChrome(source, dest);
+      applyCardChrome(source, dest, "light");
     }
   });
 
@@ -331,7 +367,9 @@ function prepareCaptureLayout(element: HTMLElement): () => void {
 
 export async function captureChartElement(
   element: HTMLElement,
+  options: CaptureChartElementOptions = {},
 ): Promise<HTMLCanvasElement> {
+  const scale = options.scale ?? CHART_CAPTURE_SCALE_DEFAULT;
   const restoreHidden = revealHiddenChartAncestors(element);
   const restoreLayout = prepareCaptureLayout(element);
   element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
@@ -348,15 +386,22 @@ export async function captureChartElement(
     }
     return html2canvas(element, {
       useCORS: true,
-      backgroundColor: null,
+      backgroundColor: LIGHT_EXPORT_BACKGROUND,
       logging: false,
-      scale: CHART_CAPTURE_SCALE,
+      scale,
       imageTimeout: 0,
       ignoreElements: (node) =>
         node instanceof Element &&
         shouldIgnoreChartExportElement(node, element),
-      onclone: (_clonedDoc, clonedElement) => {
+      onclone: (clonedDoc, clonedElement) => {
+        // Dropping the dark-theme class off the clone root makes every
+        // PatternFly CSS-variable surface (cards, tables, labels) resolve to
+        // light automatically — html2canvas reads computed styles from this
+        // clone. Only Victory's inlined SVG text needs explicit recoloring.
+        applyLightThemeToDocument(clonedDoc);
         applyComputedStylesToClone(element, clonedElement);
+        applyLightThemeSvgText(clonedElement);
+        clonedElement.style.fontFamily = EXPORT_FONT_FAMILY;
       },
     });
   } finally {

package/src/report/chartExport.ts

@@ -14,7 +14,7 @@ export const chartExportScrollProps = {
 
 export const chartExportRootStyle: CSSProperties = {
   width: "100%",
-  height: "100%",
+  height: "auto",
 };
 
 export type ChartExportMeta = {
@@ -51,6 +51,24 @@ export type ChartCaptureSource = {
   capture: () => Promise<HTMLCanvasElement>;
 };
 
+/** One label/value row rendered on a {@link PdfTextPage}. */
+export type PdfTextPageItem = {
+  label: string;
+  value: string;
+};
+
+/**
+ * A native-text PDF page appended after the captured chart images.
+ *
+ * Used for content that is not a chart/card (e.g. calculated recommendations)
+ * but still needs to be part of the exported PDF.
+ */
+export type PdfTextPage = {
+  title: string;
+  items: PdfTextPageItem[];
+  footer?: string;
+};
+
 export function releaseCanvas(canvas: HTMLCanvasElement): void {
   canvas.width = 0;
   canvas.height = 0;
@@ -67,6 +85,28 @@ export function waitForChartExportPaint(): Promise<void> {
   });
 }
 
+/** PatternFly applies dark tokens when this class is on `:root`. */
+export const PATTERNFLY_DARK_THEME_CLASSES = [
+  "pf-v6-theme-dark",
+  "pf-v5-theme-dark",
+] as const;
+
+/**
+ * Force PatternFly light tokens on a document (the html2canvas clone).
+ * Does not touch the live page.
+ */
+export function applyLightThemeToDocument(root: Document): void {
+  for (const node of [root.documentElement, root.body]) {
+    if (!node) {
+      continue;
+    }
+    for (const className of PATTERNFLY_DARK_THEME_CLASSES) {
+      node.classList.remove(className);
+    }
+    node.style.colorScheme = "light";
+  }
+}
+
 export function chartExportViewsFromLabels(
   titlePrefix: string,
   labels: Record<string, string>,

package/src/report/chartExportContext.tsx

@@ -9,6 +9,7 @@ import {
   type ChartExportMeta,
   type ChartExportView,
   chartPngFilename,
+  type PdfTextPage,
   type RegisteredChart,
 } from "./chartExport.js";
 
@@ -17,7 +18,14 @@ export type ChartExportFormat = "pdf" | "png" | "html";
 export type ChartExportApi = {
   downloadChart: (id: string) => Promise<void>;
   downloadAll: () => Promise<void>;
-  downloadPdf: (documentTitle: string) => Promise<void>;
+  /**
+   * @param extraPages - Native-text pages appended after the captured chart
+   * images (e.g. calculated recommendations that aren't rendered as charts).
+   */
+  downloadPdf: (
+    documentTitle: string,
+    extraPages?: PdfTextPage[],
+  ) => Promise<void>;
   downloadHtml: (documentTitle: string) => Promise<void>;
   downloadingChartId: string | null;
   exportingFormat: ChartExportFormat | null;

package/src/report/dashboardStyles.ts

@@ -30,6 +30,12 @@ export const dashboardStyles = {
     height: 100%;
   `,
 
+  /**
+   * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+   * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+   * charts when needed (phantom scrollbars on donut cards are avoided by the
+   * card layout and ChartExportSurface sizing, not a second body class).
+   */
   cardBodyScrollable: css`
     overflow: auto;
   `,
@@ -38,12 +44,9 @@ export const dashboardStyles = {
   // at the same specificity, which wins in the production build due to stylesheet
   // injection order. `!important` forces `hidden` regardless of that order.
   card: css`
-    min-height: 430px;
-    max-height: 520px;
-    height: 100%;
+    height: 520px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     overflow: hidden !important;
   `,