@reportforge/playwright-pdf 0.7.1 → 0.7.2

package/dist/index.js

@@ -13295,7 +13295,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.7.1" : "0.x";
+    const version = true ? "0.7.2" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/index.mjs

@@ -13296,7 +13296,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.7.1" : "0.x";
+    const version = true ? "0.7.2" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/partials/suite-breakdown.hbs

@@ -56,9 +56,13 @@
         {{#if @root.options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
       </tr>
       {{#if failure}}
-      <tr class="failure-row no-break">
+      <tr class="failure-row">
         <td colspan="{{#if @root.options.showRetries}}4{{else}}3{{/if}}">
           <div class="failure-detail failure-detail--{{failure.severity}}">
+            <div class="failure-detail__head">
+              <span class="failure-detail__dot"></span>
+              <span class="failure-detail__sev">{{failure.severity}} severity</span>
+            </div>
             {{> failure-card failure=failure showFull=@root.options.showFullFailures showStack=@root.options.showStackTraces}}
             {{#if chip}}
             <div class="root-cause-chip root-cause-chip--{{chip.category}}">
@@ -77,7 +81,7 @@
   </table>
   {{/if}}
   {{#each suites}}
-    <div style="padding-left:14px;border-left:2px solid var(--border);margin:4px 8px;">
+    <div style="padding-left:14px;border-left:1px solid var(--border);margin:4px 8px;">
       {{> suite-node this}}
     </div>
   {{/each}}

package/dist/templates/styles/base.css

@@ -153,9 +153,10 @@ tr:last-child td { border-bottom: none; }
 
 /* ── Page breaks ────────────────────────────────────────────────────────── */
 .no-break { page-break-inside: avoid; }
-/* Keep a failed test row glued to its inline failure detail: the detail block is
-   page-break-inside:avoid, so when it can't fit the remaining space it moves to the
-   next page — these pull the test row along so the title never orphans above it. */
+/* Keep a failed test row glued to the START of its inline failure detail so the
+   title never orphans above it. The detail card itself may break internally (its
+   small pieces are individually break-protected), so a tall screenshot flows to the
+   next page rather than pushing the whole block down and stranding a blank page. */
 .test-row--has-detail { page-break-after: avoid; break-after: avoid; }
 .test-row--has-detail > td { border-bottom: none; }
 .failure-row { page-break-before: avoid; break-before: avoid; }
@@ -181,7 +182,6 @@ pre {
   background: var(--surface-2);
   color: var(--text-1);
   border: 1px solid var(--border);
-  border-left: 3px solid var(--fail);
   padding: 10px 14px;
   border-radius: 4px;
   overflow-x: auto; white-space: pre-wrap; word-break: break-word;
@@ -196,7 +196,7 @@ code {
 
 /* ── Screenshot ─────────────────────────────────────────────────────────── */
 .screenshot {
-  max-width: 100%; max-height: 260px;
+  max-width: 100%; max-height: 210px; width: auto;
   border: 1px solid var(--border-2); border-radius: 4px;
   display: block; margin-top: 10px;
 }
@@ -303,18 +303,37 @@ code {
       retry history, and root cause together as the failed test's detail (not
       three separate boxes). Lives here so every template's breakdown can use it. */
 .failure-row > td { padding: 0; border: none; background: transparent; }
+/* A failed test's detail: a full-bordered card led by a severity dot — NOT a
+   coloured left rail. The design system forbids side-stripe borders, so the dot +
+   label now carry the severity the rail used to encode by colour alone. The card
+   may break across a page; only the small atomic pieces below stay intact, so a
+   tall screenshot flows to the next page instead of stranding a blank one. */
 .failure-detail {
-  border-left: 3px solid var(--fail);
-  margin: 2px 10px 10px 12px;     /* slight indent under the test row + gap before next row */
-  padding: 11px 0 11px 16px;
-  page-break-inside: avoid;
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  margin: 2px 10px 10px 12px;
+  padding: 12px 14px;
+}
+.failure-detail__head {
+  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
+  page-break-after: avoid; break-after: avoid;
+}
+.failure-detail__dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+  background: var(--fail);
+  -webkit-print-color-adjust: exact; print-color-adjust: exact;
 }
-.failure-detail--critical { border-left-color: var(--fail); }
-.failure-detail--high     { border-left-color: #A35E1E; }
-.failure-detail--medium   { border-left-color: var(--timeout); }
-.failure-detail--low      { border-left-color: var(--text-3); }
+.failure-detail__sev {
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 8.5px; font-weight: 700; letter-spacing: 0.6px;
+  text-transform: uppercase; color: var(--text-3);
+}
+.failure-detail--critical .failure-detail__dot { background: var(--fail); }
+.failure-detail--high     .failure-detail__dot { background: #A35E1E; }
+.failure-detail--medium   .failure-detail__dot { background: var(--timeout); }
+.failure-detail--low      .failure-detail__dot { background: var(--text-3); }
 
-/* error — flat on the rail, no inner box (override the base pre panel) */
+/* error — flat inside the card (override the base pre panel) */
 .failure-detail pre {
   margin: 0; padding: 0;
   background: transparent; border: none; border-radius: 0; max-height: none;
@@ -331,6 +350,7 @@ code {
   padding-top: 10px; border-top: 1px solid var(--border);
   font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
   letter-spacing: 0.5px; text-transform: uppercase;
+  page-break-inside: avoid; break-inside: avoid;
 }
 .retry-attempt {
   display: inline-block; padding: 2px 7px;
@@ -358,6 +378,7 @@ code {
   margin-top: 11px; padding-top: 10px;
   border-top: 1px solid var(--border);
   font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px;
+  page-break-inside: avoid; break-inside: avoid;
 }
 .root-cause-chip__tag {
   font-size: 8px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
@@ -683,11 +704,11 @@ code {
   border: 1px solid var(--border-2);
   border-radius: 6px; margin-bottom: 10px; overflow: hidden;
 }
+/* Full-width tinted header bar — no side-stripe (design system forbids them). */
 .suite-group__header {
   padding: 10px 14px;
   background: var(--surface-2);
-  border-bottom: 1px solid var(--border);
-  border-left: 3px solid var(--primary, #CC785C);
+  border-bottom: 1px solid var(--border-2);
   display: flex; justify-content: space-between; align-items: center;
 }
 .suite-title {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Enterprise-ready PDF reports for Playwright Test — minimal, detailed, and executive templates with CI/CD integrations",
   "license": "MIT",
   "author": "ReportForge",