@openshift-migration-advisor/shared-components 0.25.0-6a4104ca5ed2 → 0.25.0-883f4c9ae996

package/dist/report/captureChartElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAgCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAkOD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAgC5B"}
+{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAgCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAiPD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAkC5B"}

package/dist/report/captureChartElement.js

@@ -88,30 +88,56 @@ function applyComputedPadding(source, dest) {
     dest.style.paddingBottom = computed.paddingBottom;
     dest.style.paddingLeft = computed.paddingLeft;
 }
-const CARD_BORDER_WIDTH_VAR = "--pf-v6-c-card--BorderWidth";
-function applyCardChrome(source, dest) {
+function readCardBorder(source) {
+    if (source.style.borderWidth && source.style.borderStyle) {
+        return {
+            width: source.style.borderWidth,
+            style: source.style.borderStyle,
+            color: source.style.borderColor,
+        };
+    }
     const computed = window.getComputedStyle(source);
     const before = window.getComputedStyle(source, "::before");
-    dest.style.borderRadius = computed.borderRadius;
-    dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
-    dest.style.overflow = "hidden";
-    const borderWidth = before.borderTopWidth && before.borderTopWidth !== "0px"
+    const width = before.borderTopWidth && before.borderTopWidth !== "0px"
         ? before.borderTopWidth
         : computed.borderTopWidth;
-    const borderStyle = before.borderTopStyle && before.borderTopStyle !== "none"
+    const style = before.borderTopStyle && before.borderTopStyle !== "none"
         ? before.borderTopStyle
         : computed.borderTopStyle;
-    const borderColor = before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
+    const color = before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
         ? before.borderTopColor
         : computed.borderTopColor;
-    if (borderWidth !== "0px" && borderStyle !== "none") {
-        dest.style.borderWidth = borderWidth;
-        dest.style.borderStyle = borderStyle;
-        dest.style.borderColor = borderColor;
+    if (width === "0px" || style === "none") {
+        return null;
     }
-    // PF draws the border on ::before via this token. html2canvas still paints
-    // that pseudo even if a stylesheet sets content:none, so collapse it here.
-    dest.style.setProperty(CARD_BORDER_WIDTH_VAR, "0px");
+    return { width, style, color };
+}
+function applyCardChrome(source, dest) {
+    const computed = window.getComputedStyle(source);
+    dest.style.borderRadius = computed.borderRadius;
+    dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
+    dest.style.overflow = "hidden";
+    const border = readCardBorder(source);
+    if (border) {
+        dest.style.borderWidth = border.width;
+        dest.style.borderStyle = border.style;
+        dest.style.borderColor = border.color;
+    }
+}
+function hideCardBeforePseudo() {
+    const style = document.createElement("style");
+    style.setAttribute("data-chart-export-hide-before", "");
+    style.textContent = `
+[${CHART_EXPORT_CAPTURING_ATTR}] .pf-v6-c-card::before,
+[${CHART_EXPORT_CAPTURING_ATTR}].pf-v6-c-card::before {
+  border: none !important;
+  box-shadow: none !important;
+}
+`;
+    document.head.append(style);
+    return () => {
+        style.remove();
+    };
 }
 function copyComputedPadding(node) {
     const previous = {
@@ -135,8 +161,6 @@ function copyCardChrome(node) {
         minHeight: node.style.minHeight,
         height: node.style.height,
         maxHeight: node.style.maxHeight,
-        borderWidthVar: node.style.getPropertyValue(CARD_BORDER_WIDTH_VAR),
-        borderWidthVarPriority: node.style.getPropertyPriority(CARD_BORDER_WIDTH_VAR),
     };
     applyCardChrome(node, node);
     node.style.minHeight = "0px";
@@ -215,12 +239,6 @@ function prepareCaptureLayout(element) {
             entry.node.style.minHeight = entry.minHeight;
             entry.node.style.height = entry.height;
             entry.node.style.maxHeight = entry.maxHeight;
-            if (entry.borderWidthVar) {
-                entry.node.style.setProperty(CARD_BORDER_WIDTH_VAR, entry.borderWidthVar, entry.borderWidthVarPriority);
-            }
-            else {
-                entry.node.style.removeProperty(CARD_BORDER_WIDTH_VAR);
-            }
         }
         for (const entry of previousPadding) {
             entry.node.style.paddingTop = entry.paddingTop;
@@ -234,6 +252,7 @@ export async function captureChartElement(element) {
     const restoreHidden = revealHiddenChartAncestors(element);
     const restoreLayout = prepareCaptureLayout(element);
     element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
+    const restoreCardBefore = hideCardBeforePseudo();
     try {
         await new Promise((resolve) => {
             requestAnimationFrame(() => resolve());
@@ -257,6 +276,7 @@ export async function captureChartElement(element) {
         });
     }
     finally {
+        restoreCardBefore();
         element.removeAttribute(CHART_EXPORT_CAPTURING_ATTR);
         restoreLayout();
         restoreHidden();

package/dist/report/chartExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,2BAA2B,yBAAyB,CAAC;AAElE,eAAO,MAAM,oBAAoB;;CAEvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;CAEzB,CAAC;AAEX,eAAO,MAAM,oBAAoB,EAAE,aAAkC,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAG7D;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CASvD;AAED,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,eAAe,EAAE,CAKnB;AAqBD,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAC7D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,GACpD,kBAAkB,EAAE,CAyBtB;AAED,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,eAAe,EAAE,GACxB,OAAO,CAAC,IAAI,CAAC,CAcf;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,eAAe,EAAE,GACxB,eAAe,EAAE,CAcnB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAcrE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMvD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAU,GAAG,MAAM,CAEpE;AAWD;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,OAAO,EACb,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,OAAO,CAeT;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAS/D"}
+{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,2BAA2B,yBAAyB,CAAC;AAElE,eAAO,MAAM,oBAAoB;;CAEvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;CAEzB,CAAC;AAEX,eAAO,MAAM,oBAAoB,EAAE,aAGlC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAG7D;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CASvD;AAED,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,eAAe,EAAE,CAKnB;AAqBD,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAC7D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,GACpD,kBAAkB,EAAE,CAyBtB;AAED,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,eAAe,EAAE,GACxB,OAAO,CAAC,IAAI,CAAC,CAcf;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,eAAe,EAAE,GACxB,eAAe,EAAE,CAcnB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAcrE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMvD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAU,GAAG,MAAM,CAEpE;AAWD;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,OAAO,EACb,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,OAAO,CAeT;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAS/D"}

package/dist/report/chartExport.js

@@ -7,7 +7,10 @@ export const chartExportHideProps = {
 export const chartExportScrollProps = {
     [CHART_EXPORT_SCROLL_ATTR]: "",
 };
-export const chartExportRootStyle = { height: "100%" };
+export const chartExportRootStyle = {
+    width: "100%",
+    height: "100%",
+};
 export function releaseCanvas(canvas) {
     canvas.width = 0;
     canvas.height = 0;

package/dist/report/htmlExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"htmlExport.d.ts","sourceRoot":"","sources":["../../src/report/htmlExport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED,wBAAgB,eAAe,CAC7B,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,eAAe,EAAE,EACzB,WAAW,OAAa,GACvB,MAAM,CA0CR;AAED,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAiBf"}
+{"version":3,"file":"htmlExport.d.ts","sourceRoot":"","sources":["../../src/report/htmlExport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED,wBAAgB,eAAe,CAC7B,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,eAAe,EAAE,EACzB,WAAW,OAAa,GACvB,MAAM,CAwCR;AAED,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAiBf"}

package/dist/report/htmlExport.js

@@ -32,10 +32,8 @@ export function buildHtmlReport(documentTitle, images, generatedAt = new Date())
     h2 { font-size: 18px; margin: 32px 0 12px; }
     .meta { color: #6a6e73; margin-bottom: 24px; }
     img {
-      max-width: 100%;
+      width: 100%;
       height: auto;
-      border: 1px solid #d2d2d2;
-      border-radius: 8px;
     }
   </style>
 </head>

package/dist/report/pdfExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pdfExport.d.ts","sourceRoot":"","sources":["../../src/report/pdfExport.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAO1E,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CA+Df"}
+{"version":3,"file":"pdfExport.d.ts","sourceRoot":"","sources":["../../src/report/pdfExport.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAQ1E,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAuDf"}

package/dist/report/pdfExport.js

@@ -1,7 +1,8 @@
 import jsPDF from "jspdf";
 import { releaseCanvas } from "./chartExport.js";
-import { sliceCanvas, splitSegmentForPageHeight } from "./pdfPage.js";
+import { fitPdfImageSize, placePdfBlock, sliceCanvas } from "./pdfPage.js";
 const MARGIN_MM = 10;
+const GAP_MM = 8;
 /** Flatten captures onto white; jsPDF cannot embed transparent PNG alpha cleanly. */
 const PAGE_BACKGROUND = "#ffffff";
 export async function buildPdfFromCharts(charts, documentTitle) {
@@ -10,27 +11,23 @@ export async function buildPdfFromCharts(charts, documentTitle) {
     const pageHeight = pdf.internal.pageSize.getHeight();
     const contentWidth = pageWidth - MARGIN_MM * 2;
     const contentHeight = pageHeight - MARGIN_MM * 2;
+    const pageTop = MARGIN_MM;
+    const pageBottom = pageHeight - MARGIN_MM;
     addCoverPage(pdf, documentTitle, charts.map((chart) => chart.title), pageWidth, pageHeight);
+    let cursorY = null;
     for (const chart of charts) {
         const canvas = await chart.capture();
         try {
             if (canvas.width < 1 || canvas.height < 1) {
                 throw new Error("Chart capture produced an empty image");
             }
-            pdf.addPage();
-            const scaleFactor = contentWidth / Math.max(1, canvas.width);
-            const pageHeightPx = contentHeight / scaleFactor;
-            const segments = splitSegmentForPageHeight({ top: 0, height: canvas.height }, canvas.height, pageHeightPx);
-            for (let index = 0; index < segments.length; index++) {
-                if (index > 0) {
-                    pdf.addPage();
-                }
-                const segment = segments[index];
-                const sliceHeight = Math.max(1, Math.min(segment.height, canvas.height - segment.top));
-                const pageCanvas = sliceCanvas(canvas, canvas.width, sliceHeight, segment.top, PAGE_BACKGROUND);
-                addCanvasPage(pdf, pageCanvas, sliceHeight, contentWidth, contentHeight, MARGIN_MM);
-                releaseCanvas(pageCanvas);
+            const size = fitPdfImageSize(canvas.width, canvas.height, contentWidth, contentHeight);
+            const placement = placePdfBlock(cursorY, size.heightMm, pageTop, pageBottom);
+            if (placement.needsNewPage) {
+                pdf.addPage();
             }
+            addChartImage(pdf, canvas, MARGIN_MM + (contentWidth - size.widthMm) / 2, placement.y, size.widthMm, size.heightMm);
+            cursorY = placement.y + size.heightMm + GAP_MM;
         }
         finally {
             releaseCanvas(canvas);
@@ -64,16 +61,14 @@ function addCoverPage(pdf, documentTitle, tocItems, pageWidth, pageHeight) {
         tocY += 7;
     }
 }
-function addCanvasPage(pdf, canvas, sliceHeightPx, contentWidth, contentHeight, margin) {
-    if (canvas.width < 1 || canvas.height < 1) {
-        throw new Error("Chart capture produced an empty image");
+function addChartImage(pdf, canvas, x, y, widthMm, heightMm) {
+    const flattened = sliceCanvas(canvas, canvas.width, canvas.height, 0, PAGE_BACKGROUND);
+    try {
+        pdf.addImage(flattened.toDataURL("image/jpeg", 0.92), "JPEG", x, y, widthMm, heightMm);
+    }
+    finally {
+        releaseCanvas(flattened);
     }
-    // JPEG is opaque. jsPDF's PNG path mishandles canvas alpha (black fills / failed export).
-    const imageData = canvas.toDataURL("image/jpeg", 0.92);
-    const pageScale = Math.min(contentWidth / canvas.width, contentHeight / sliceHeightPx);
-    const renderWidthMm = canvas.width * pageScale;
-    const renderHeightMm = sliceHeightPx * pageScale;
-    pdf.addImage(imageData, "JPEG", margin + (contentWidth - renderWidthMm) / 2, margin, renderWidthMm, renderHeightMm);
 }
 function addPageNumbers(pdf, pageWidth, pageHeight) {
     const totalPages = pdf.getNumberOfPages();

package/dist/report/pdfPage.d.ts

@@ -3,5 +3,13 @@ export interface PdfExportSegment {
     height: number;
 }
 export declare function splitSegmentForPageHeight(segment: PdfExportSegment, imgHeight: number, pageHeightPx: number): PdfExportSegment[];
+export declare function fitPdfImageSize(pixelWidth: number, pixelHeight: number, maxWidthMm: number, maxHeightMm: number): {
+    widthMm: number;
+    heightMm: number;
+};
+export declare function placePdfBlock(cursorY: number | null, blockHeightMm: number, pageTopMm: number, pageBottomMm: number): {
+    y: number;
+    needsNewPage: boolean;
+};
 export declare function sliceCanvas(sourceCanvas: HTMLCanvasElement, width: number, height: number, offsetY: number, backgroundColor: string): HTMLCanvasElement;
 //# sourceMappingURL=pdfPage.d.ts.map

package/dist/report/pdfPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pdfPage.d.ts","sourceRoot":"","sources":["../../src/report/pdfPage.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB,gBAAgB,EAAE,CAcpB;AAED,wBAAgB,WAAW,CACzB,YAAY,EAAE,iBAAiB,EAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,MAAM,GACtB,iBAAiB,CAsBnB"}
+{"version":3,"file":"pdfPage.d.ts","sourceRoot":"","sources":["../../src/report/pdfPage.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB,gBAAgB,EAAE,CAcpB;AAED,wBAAgB,eAAe,CAC7B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAUvC;AAED,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAE,CAKtC;AAED,wBAAgB,WAAW,CACzB,YAAY,EAAE,iBAAiB,EAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,MAAM,GACtB,iBAAiB,CAsBnB"}

package/dist/report/pdfPage.js

@@ -12,6 +12,23 @@ export function splitSegmentForPageHeight(segment, imgHeight, pageHeightPx) {
     }
     return slices;
 }
+export function fitPdfImageSize(pixelWidth, pixelHeight, maxWidthMm, maxHeightMm) {
+    const safeWidth = Math.max(1, pixelWidth);
+    const safeHeight = Math.max(1, pixelHeight);
+    const widthScale = maxWidthMm / safeWidth;
+    const heightAtFullWidth = safeHeight * widthScale;
+    if (heightAtFullWidth <= maxHeightMm) {
+        return { widthMm: maxWidthMm, heightMm: heightAtFullWidth };
+    }
+    const scale = maxHeightMm / safeHeight;
+    return { widthMm: safeWidth * scale, heightMm: maxHeightMm };
+}
+export function placePdfBlock(cursorY, blockHeightMm, pageTopMm, pageBottomMm) {
+    if (cursorY === null || cursorY + blockHeightMm > pageBottomMm) {
+        return { y: pageTopMm, needsNewPage: true };
+    }
+    return { y: cursorY, needsNewPage: false };
+}
 export function sliceCanvas(sourceCanvas, width, height, offsetY, backgroundColor) {
     const pageCanvas = document.createElement("canvas");
     pageCanvas.width = width;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.25.0-6a4104ca5ed2",
+  "version": "0.25.0-883f4c9ae996",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
     "README.md"
   ],
   "dependencies": {
-    "html2canvas-pro": "^2.4.3",
+    "html2canvas-pro": "^2.4.5",
     "jspdf": "^4.2.1",
-    "jszip": "^3.10.1"
+    "jszip": "^3.10.2"
   }
 }

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

@@ -60,7 +60,7 @@ describe("captureChartElement", () => {
     expect(panel.style.display).toBe("none");
   });
 
-  it("keeps the card radius and paints a real border for the snapshot", async () => {
+  it("paints a real card border and hides the PatternFly ::before during capture", async () => {
     const root = document.createElement("div");
     const card = document.createElement("div");
     card.className = "pf-v6-c-card";
@@ -71,23 +71,20 @@ describe("captureChartElement", () => {
     document.body.append(root);
 
     mockedHtml2Canvas.mockImplementation(async (_element, options) => {
-      expect(card.style.borderRadius).toBe("16px");
+      expect(card.style.borderWidth).toBe("1px");
       expect(card.style.overflow).toBe("hidden");
-      expect(card.style.backgroundColor).toBe("rgb(255, 255, 255)");
-      expect(card.style.getPropertyValue("--pf-v6-c-card--BorderWidth")).toBe(
-        "0px",
-      );
+      expect(
+        document.head.querySelector("[data-chart-export-hide-before]"),
+      ).not.toBeNull();
 
       const cloneRoot = document.createElement("div");
       const cloneCard = document.createElement("div");
       cloneCard.className = "pf-v6-c-card";
       cloneRoot.append(cloneCard);
       options?.onclone?.(document, cloneRoot);
-      expect(cloneCard.style.borderRadius).toBe("16px");
+      expect(cloneCard.style.borderWidth).toBe("1px");
+      expect(cloneCard.style.borderStyle).toBe("solid");
       expect(cloneCard.style.overflow).toBe("hidden");
-      expect(
-        cloneCard.style.getPropertyValue("--pf-v6-c-card--BorderWidth"),
-      ).toBe("0px");
 
       const canvas = document.createElement("canvas");
       canvas.width = 1;
@@ -97,8 +94,11 @@ describe("captureChartElement", () => {
 
     await captureChartElement(root);
 
-    expect(card.style.borderRadius).toBe("16px");
-    expect(card.style.getPropertyValue("--pf-v6-c-card--BorderWidth")).toBe("");
+    expect(card.style.borderWidth).toBe("1px");
+    expect(card.style.overflow).toBe("");
+    expect(
+      document.head.querySelector("[data-chart-export-hide-before]"),
+    ).toBeNull();
   });
 
   it("inlines computed card title padding so content stays inset", async () => {

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

@@ -7,7 +7,11 @@ import {
 } from "../chartExport.js";
 import { getChartExportFilename } from "../chartExportFilenames.js";
 import { buildHtmlReport, escapeHtml } from "../htmlExport.js";
-import { splitSegmentForPageHeight } from "../pdfPage.js";
+import {
+  fitPdfImageSize,
+  placePdfBlock,
+  splitSegmentForPageHeight,
+} from "../pdfPage.js";
 
 describe("chart export filenames", () => {
   const date = new Date("2026-07-01T15:30:00");
@@ -161,6 +165,39 @@ describe("splitSegmentForPageHeight", () => {
   });
 });
 
+describe("fitPdfImageSize", () => {
+  it("keeps full content width when the chart fits the page", () => {
+    expect(fitPdfImageSize(800, 200, 190, 277)).toEqual({
+      widthMm: 190,
+      heightMm: 47.5,
+    });
+  });
+
+  it("scales down a chart taller than the page", () => {
+    expect(fitPdfImageSize(1000, 2000, 200, 100)).toEqual({
+      widthMm: 50,
+      heightMm: 100,
+    });
+  });
+});
+
+describe("placePdfBlock", () => {
+  it("stacks charts on the same page while they fit", () => {
+    expect(placePdfBlock(null, 50, 10, 287)).toEqual({
+      y: 10,
+      needsNewPage: true,
+    });
+    expect(placePdfBlock(68, 50, 10, 287)).toEqual({
+      y: 68,
+      needsNewPage: false,
+    });
+    expect(placePdfBlock(250, 50, 10, 287)).toEqual({
+      y: 10,
+      needsNewPage: true,
+    });
+  });
+});
+
 describe("buildHtmlReport", () => {
   it("embeds captured chart images and escapes the title", () => {
     const html = buildHtmlReport(
@@ -179,6 +216,8 @@ describe("buildHtmlReport", () => {
     );
     expect(html).toContain('src="data:image/png;base64,abc"');
     expect(html).toContain("Infrastructure summary");
+    expect(html).not.toContain("border:");
+    expect(html).toContain("width: 100%");
     expect(escapeHtml("<b>")).toBe("&lt;b&gt;");
     expect(escapeHtml("it's")).toBe("it&#39;s");
   });

package/src/report/captureChartElement.ts

@@ -117,35 +117,65 @@ function applyComputedPadding(source: HTMLElement, dest: HTMLElement): void {
   dest.style.paddingLeft = computed.paddingLeft;
 }
 
-const CARD_BORDER_WIDTH_VAR = "--pf-v6-c-card--BorderWidth";
-
-function applyCardChrome(source: HTMLElement, dest: HTMLElement): void {
+function readCardBorder(source: HTMLElement): {
+  width: string;
+  style: string;
+  color: string;
+} | null {
+  if (source.style.borderWidth && source.style.borderStyle) {
+    return {
+      width: source.style.borderWidth,
+      style: source.style.borderStyle,
+      color: source.style.borderColor,
+    };
+  }
   const computed = window.getComputedStyle(source);
   const before = window.getComputedStyle(source, "::before");
-  dest.style.borderRadius = computed.borderRadius;
-  dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
-  dest.style.overflow = "hidden";
-
-  const borderWidth =
+  const width =
     before.borderTopWidth && before.borderTopWidth !== "0px"
       ? before.borderTopWidth
       : computed.borderTopWidth;
-  const borderStyle =
+  const style =
     before.borderTopStyle && before.borderTopStyle !== "none"
       ? before.borderTopStyle
       : computed.borderTopStyle;
-  const borderColor =
+  const color =
     before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
       ? before.borderTopColor
       : computed.borderTopColor;
-  if (borderWidth !== "0px" && borderStyle !== "none") {
-    dest.style.borderWidth = borderWidth;
-    dest.style.borderStyle = borderStyle;
-    dest.style.borderColor = borderColor;
+  if (width === "0px" || style === "none") {
+    return null;
   }
-  // PF draws the border on ::before via this token. html2canvas still paints
-  // that pseudo even if a stylesheet sets content:none, so collapse it here.
-  dest.style.setProperty(CARD_BORDER_WIDTH_VAR, "0px");
+  return { width, style, color };
+}
+
+function applyCardChrome(source: HTMLElement, dest: HTMLElement): void {
+  const computed = window.getComputedStyle(source);
+  dest.style.borderRadius = computed.borderRadius;
+  dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
+  dest.style.overflow = "hidden";
+  const border = readCardBorder(source);
+  if (border) {
+    dest.style.borderWidth = border.width;
+    dest.style.borderStyle = border.style;
+    dest.style.borderColor = border.color;
+  }
+}
+
+function hideCardBeforePseudo(): () => void {
+  const style = document.createElement("style");
+  style.setAttribute("data-chart-export-hide-before", "");
+  style.textContent = `
+[${CHART_EXPORT_CAPTURING_ATTR}] .pf-v6-c-card::before,
+[${CHART_EXPORT_CAPTURING_ATTR}].pf-v6-c-card::before {
+  border: none !important;
+  box-shadow: none !important;
+}
+`;
+  document.head.append(style);
+  return () => {
+    style.remove();
+  };
 }
 
 function copyComputedPadding(node: HTMLElement): {
@@ -175,8 +205,6 @@ function copyCardChrome(node: HTMLElement): {
   minHeight: string;
   height: string;
   maxHeight: string;
-  borderWidthVar: string;
-  borderWidthVarPriority: string;
 } {
   const previous = {
     borderRadius: node.style.borderRadius,
@@ -189,10 +217,6 @@ function copyCardChrome(node: HTMLElement): {
     minHeight: node.style.minHeight,
     height: node.style.height,
     maxHeight: node.style.maxHeight,
-    borderWidthVar: node.style.getPropertyValue(CARD_BORDER_WIDTH_VAR),
-    borderWidthVarPriority: node.style.getPropertyPriority(
-      CARD_BORDER_WIDTH_VAR,
-    ),
   };
   applyCardChrome(node, node);
   node.style.minHeight = "0px";
@@ -295,15 +319,6 @@ function prepareCaptureLayout(element: HTMLElement): () => void {
       entry.node.style.minHeight = entry.minHeight;
       entry.node.style.height = entry.height;
       entry.node.style.maxHeight = entry.maxHeight;
-      if (entry.borderWidthVar) {
-        entry.node.style.setProperty(
-          CARD_BORDER_WIDTH_VAR,
-          entry.borderWidthVar,
-          entry.borderWidthVarPriority,
-        );
-      } else {
-        entry.node.style.removeProperty(CARD_BORDER_WIDTH_VAR);
-      }
     }
     for (const entry of previousPadding) {
       entry.node.style.paddingTop = entry.paddingTop;
@@ -320,6 +335,7 @@ export async function captureChartElement(
   const restoreHidden = revealHiddenChartAncestors(element);
   const restoreLayout = prepareCaptureLayout(element);
   element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
+  const restoreCardBefore = hideCardBeforePseudo();
 
   try {
     await new Promise<void>((resolve) => {
@@ -344,6 +360,7 @@ export async function captureChartElement(
       },
     });
   } finally {
+    restoreCardBefore();
     element.removeAttribute(CHART_EXPORT_CAPTURING_ATTR);
     restoreLayout();
     restoreHidden();

package/src/report/chartExport.ts

@@ -12,7 +12,10 @@ export const chartExportScrollProps = {
   [CHART_EXPORT_SCROLL_ATTR]: "",
 } as const;
 
-export const chartExportRootStyle: CSSProperties = { height: "100%" };
+export const chartExportRootStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+};
 
 export type ChartExportMeta = {
   id: string;

package/src/report/htmlExport.ts

@@ -46,10 +46,8 @@ export function buildHtmlReport(
     h2 { font-size: 18px; margin: 32px 0 12px; }
     .meta { color: #6a6e73; margin-bottom: 24px; }
     img {
-      max-width: 100%;
+      width: 100%;
       height: auto;
-      border: 1px solid #d2d2d2;
-      border-radius: 8px;
     }
   </style>
 </head>

package/src/report/pdfExport.ts

@@ -1,8 +1,9 @@
 import jsPDF from "jspdf";
 import { type ChartCaptureSource, releaseCanvas } from "./chartExport.js";
-import { sliceCanvas, splitSegmentForPageHeight } from "./pdfPage.js";
+import { fitPdfImageSize, placePdfBlock, sliceCanvas } from "./pdfPage.js";
 
 const MARGIN_MM = 10;
+const GAP_MM = 8;
 /** Flatten captures onto white; jsPDF cannot embed transparent PNG alpha cleanly. */
 const PAGE_BACKGROUND = "#ffffff";
 
@@ -15,6 +16,8 @@ export async function buildPdfFromCharts(
   const pageHeight = pdf.internal.pageSize.getHeight();
   const contentWidth = pageWidth - MARGIN_MM * 2;
   const contentHeight = pageHeight - MARGIN_MM * 2;
+  const pageTop = MARGIN_MM;
+  const pageBottom = pageHeight - MARGIN_MM;
 
   addCoverPage(
     pdf,
@@ -24,47 +27,37 @@ export async function buildPdfFromCharts(
     pageHeight,
   );
 
+  let cursorY: number | null = null;
   for (const chart of charts) {
     const canvas = await chart.capture();
     try {
       if (canvas.width < 1 || canvas.height < 1) {
         throw new Error("Chart capture produced an empty image");
       }
-      pdf.addPage();
-      const scaleFactor = contentWidth / Math.max(1, canvas.width);
-      const pageHeightPx = contentHeight / scaleFactor;
-      const segments = splitSegmentForPageHeight(
-        { top: 0, height: canvas.height },
+      const size = fitPdfImageSize(
+        canvas.width,
         canvas.height,
-        pageHeightPx,
+        contentWidth,
+        contentHeight,
       );
-
-      for (let index = 0; index < segments.length; index++) {
-        if (index > 0) {
-          pdf.addPage();
-        }
-        const segment = segments[index];
-        const sliceHeight = Math.max(
-          1,
-          Math.min(segment.height, canvas.height - segment.top),
-        );
-        const pageCanvas = sliceCanvas(
-          canvas,
-          canvas.width,
-          sliceHeight,
-          segment.top,
-          PAGE_BACKGROUND,
-        );
-        addCanvasPage(
-          pdf,
-          pageCanvas,
-          sliceHeight,
-          contentWidth,
-          contentHeight,
-          MARGIN_MM,
-        );
-        releaseCanvas(pageCanvas);
+      const placement = placePdfBlock(
+        cursorY,
+        size.heightMm,
+        pageTop,
+        pageBottom,
+      );
+      if (placement.needsNewPage) {
+        pdf.addPage();
       }
+      addChartImage(
+        pdf,
+        canvas,
+        MARGIN_MM + (contentWidth - size.widthMm) / 2,
+        placement.y,
+        size.widthMm,
+        size.heightMm,
+      );
+      cursorY = placement.y + size.heightMm + GAP_MM;
     } finally {
       releaseCanvas(canvas);
     }
@@ -116,33 +109,33 @@ function addCoverPage(
   }
 }
 
-function addCanvasPage(
+function addChartImage(
   pdf: jsPDF,
   canvas: HTMLCanvasElement,
-  sliceHeightPx: number,
-  contentWidth: number,
-  contentHeight: number,
-  margin: number,
+  x: number,
+  y: number,
+  widthMm: number,
+  heightMm: number,
 ): void {
-  if (canvas.width < 1 || canvas.height < 1) {
-    throw new Error("Chart capture produced an empty image");
-  }
-  // JPEG is opaque. jsPDF's PNG path mishandles canvas alpha (black fills / failed export).
-  const imageData = canvas.toDataURL("image/jpeg", 0.92);
-  const pageScale = Math.min(
-    contentWidth / canvas.width,
-    contentHeight / sliceHeightPx,
-  );
-  const renderWidthMm = canvas.width * pageScale;
-  const renderHeightMm = sliceHeightPx * pageScale;
-  pdf.addImage(
-    imageData,
-    "JPEG",
-    margin + (contentWidth - renderWidthMm) / 2,
-    margin,
-    renderWidthMm,
-    renderHeightMm,
+  const flattened = sliceCanvas(
+    canvas,
+    canvas.width,
+    canvas.height,
+    0,
+    PAGE_BACKGROUND,
   );
+  try {
+    pdf.addImage(
+      flattened.toDataURL("image/jpeg", 0.92),
+      "JPEG",
+      x,
+      y,
+      widthMm,
+      heightMm,
+    );
+  } finally {
+    releaseCanvas(flattened);
+  }
 }
 
 function addPageNumbers(

package/src/report/pdfPage.ts

@@ -23,6 +23,35 @@ export function splitSegmentForPageHeight(
   return slices;
 }
 
+export function fitPdfImageSize(
+  pixelWidth: number,
+  pixelHeight: number,
+  maxWidthMm: number,
+  maxHeightMm: number,
+): { widthMm: number; heightMm: number } {
+  const safeWidth = Math.max(1, pixelWidth);
+  const safeHeight = Math.max(1, pixelHeight);
+  const widthScale = maxWidthMm / safeWidth;
+  const heightAtFullWidth = safeHeight * widthScale;
+  if (heightAtFullWidth <= maxHeightMm) {
+    return { widthMm: maxWidthMm, heightMm: heightAtFullWidth };
+  }
+  const scale = maxHeightMm / safeHeight;
+  return { widthMm: safeWidth * scale, heightMm: maxHeightMm };
+}
+
+export function placePdfBlock(
+  cursorY: number | null,
+  blockHeightMm: number,
+  pageTopMm: number,
+  pageBottomMm: number,
+): { y: number; needsNewPage: boolean } {
+  if (cursorY === null || cursorY + blockHeightMm > pageBottomMm) {
+    return { y: pageTopMm, needsNewPage: true };
+  }
+  return { y: cursorY, needsNewPage: false };
+}
+
 export function sliceCanvas(
   sourceCanvas: HTMLCanvasElement,
   width: number,