From 7487cce5c8d946813f6cc31f463353a40b84e020 Mon Sep 17 00:00:00 2001
From: Todti <hello@iamtodt.com>
Date: Tue, 9 Jun 2026 13:14:44 +0100
Subject: [PATCH 1/4] fix(web-components): fix markdown truncation and HTML
 attachment modal issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MarkdownPreview: use dedicated CSS class without flex height constraints
  so the dynamically-measured iframe height attribute is respected (#679)
- MarkdownPreview: drop height="100%" fallback before content loads;
  browser default height is more sensible in a block container
- Modal: change overflow: hidden → overflow-y: auto on modal-data-component
  so tall markdown content can be scrolled within the modal (#679)
- Modal: wire .attachmentViewStack/.attachmentViewPane into the flex height
  chain so HtmlPreview fills the fullscreen modal instead of collapsing
  to the browser default ~150px (#692)
- HtmlPreview: set blob MIME to text/html; charset=utf-8 to prevent the
  iframe from guessing encoding from stale meta tags (#692)
- TrAttachment: pass current preview state when opening the modal so
  HTML attachments open in preview mode, not source-code mode (#692)
---
 .../components/TestResult/TrSteps/TrAttachment.tsx |  3 ++-
 .../src/components/Attachment/HtmlPreview.tsx      |  2 +-
 .../src/components/Attachment/MarkdownPreview.tsx  |  4 ++--
 .../src/components/Attachment/styles.scss          |  6 ++++++
 .../src/components/Modal/styles.scss               | 14 +++++++++++++-
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx
index b6d9a1092c7..0f15b1b4605 100644
--- a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx
+++ b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx
@@ -104,7 +104,8 @@ export const TrAttachment: FunctionComponent<{
     event.stopPropagation();
     openModal({
       data: item,
-      component: <Attachment item={item} previewable={true} />,
+      preview: showPreview,
+      component: <Attachment item={item} previewable={showPreview} />,
     });
   };
 
diff --git a/packages/web-components/src/components/Attachment/HtmlPreview.tsx b/packages/web-components/src/components/Attachment/HtmlPreview.tsx
index ba1f2eb07f9..930b4c53da9 100644
--- a/packages/web-components/src/components/Attachment/HtmlPreview.tsx
+++ b/packages/web-components/src/components/Attachment/HtmlPreview.tsx
@@ -40,7 +40,7 @@ export const HtmlPreview: FunctionalComponent<HtmlAttachmentPreviewProps> = ({ a
           wrapped = DARK_STYLE + sanitizedText;
         }
       }
-      const blob = new Blob([wrapped], { type: "text/html" });
+      const blob = new Blob([wrapped], { type: "text/html; charset=utf-8" });
       const url = URL.createObjectURL(blob);
       setBlobUrl(url);
 
diff --git a/packages/web-components/src/components/Attachment/MarkdownPreview.tsx b/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
index 1b39ae0c851..5d01c860009 100644
--- a/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
+++ b/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
@@ -67,13 +67,13 @@ export const MarkdownPreview: FunctionalComponent<MarkdownAttachmentPreviewProps
   }
 
   return (
-    <div className={styles["html-attachment-preview"]} data-testid="markdown-attachment-preview">
+    <div className={styles["markdown-attachment-preview"]} data-testid="markdown-attachment-preview">
       {blobUrl && (
         <iframe
           title="Markdown attachment"
           src={blobUrl}
           width="100%"
-          height={height ? String(height) : "100%"}
+          height={height || undefined}
           frameBorder={0}
           sandbox="allow-same-origin"
           onLoad={handleLoad}
diff --git a/packages/web-components/src/components/Attachment/styles.scss b/packages/web-components/src/components/Attachment/styles.scss
index 005edd8a75b..e17f891d9db 100644
--- a/packages/web-components/src/components/Attachment/styles.scss
+++ b/packages/web-components/src/components/Attachment/styles.scss
@@ -238,6 +238,12 @@
   }
 }
 
+.markdown-attachment-preview {
+  padding: 0 16px;
+  overflow-y: auto;
+  max-height: 100%;
+}
+
 .test-result-attachment-video {
   display: block;
   max-width: 100%;
diff --git a/packages/web-components/src/components/Modal/styles.scss b/packages/web-components/src/components/Modal/styles.scss
index 50e3c9554ea..a3e0a31505b 100644
--- a/packages/web-components/src/components/Modal/styles.scss
+++ b/packages/web-components/src/components/Modal/styles.scss
@@ -47,7 +47,7 @@
 
 .modal-data-component {
   flex: 1 1 auto;
-  overflow: hidden;
+  overflow-y: auto;
   pointer-events: all;
   height: 100%;
   min-height: 0;
@@ -60,6 +60,18 @@
     min-height: 100%;
     flex: 1 1 auto;
   }
+
+  :global(.attachmentViewStack) {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :global(.attachmentViewPane):not([hidden]) {
+    flex: 1;
+    min-height: 0;
+  }
 }
 
 .modal-image {

From ebd147d6e7ff9c58f490721ab09b85102e877db7 Mon Sep 17 00:00:00 2001
From: Todti <hello@iamtodt.com>
Date: Tue, 9 Jun 2026 16:15:45 +0100
Subject: [PATCH 2/4] fix: address review feedback on attachment preview

- Always open modal in preview mode for previewable attachments (HTML/md),
  regardless of current inline toggle state
- Fix markdown syntax highlighting: prism-markup must be imported before
  prism-markdown since the latter calls Prism.languages.extend('markup')
- Add vertical padding to markdown-attachment-preview (was 0 top/bottom)
- Fix modal layout chain: make attachmentViewPane a flex column so
  html-attachment-preview fills the fullscreen modal correctly
- Reset html/body margin in markdown iframe so scrollHeight is accurate
  and preview does not scroll past visible content
---
 .../src/components/TestResult/TrSteps/TrAttachment.tsx     | 4 ++--
 .../src/components/Attachment/MarkdownPreview.tsx          | 1 +
 .../src/components/Attachment/prism-setup.ts               | 2 +-
 .../web-components/src/components/Attachment/styles.scss   | 5 +++--
 packages/web-components/src/components/Modal/styles.scss   | 7 +++++++
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx
index 0f15b1b4605..2469eb9d361 100644
--- a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx
+++ b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx
@@ -104,8 +104,8 @@ export const TrAttachment: FunctionComponent<{
     event.stopPropagation();
     openModal({
       data: item,
-      preview: showPreview,
-      component: <Attachment item={item} previewable={showPreview} />,
+      preview: isPreviewable,
+      component: <Attachment item={item} previewable={isPreviewable} />,
     });
   };
 
diff --git a/packages/web-components/src/components/Attachment/MarkdownPreview.tsx b/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
index 5d01c860009..62402a41aa7 100644
--- a/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
+++ b/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
@@ -46,6 +46,7 @@ export const MarkdownPreview: FunctionalComponent<MarkdownAttachmentPreviewProps
     <meta charset="utf-8">
     <style>:root {${iframeThemeVars}}</style>
     <style>${proseStyles}</style>
+    <style>html, body { margin: 0; }</style>
   </head>
   <body>${sanitized}</body>
 </html>`;
diff --git a/packages/web-components/src/components/Attachment/prism-setup.ts b/packages/web-components/src/components/Attachment/prism-setup.ts
index 2725eef4027..7b8213aa00d 100644
--- a/packages/web-components/src/components/Attachment/prism-setup.ts
+++ b/packages/web-components/src/components/Attachment/prism-setup.ts
@@ -1,10 +1,10 @@
 import "./prism-global.js";
+import "prismjs/components/prism-markup";
 import "prismjs/components/prism-css";
 import "prismjs/components/prism-csv";
 import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-json";
 import "prismjs/components/prism-markdown";
-import "prismjs/components/prism-markup";
 import "prismjs/components/prism-typescript";
 
 export { default as Prism } from "prismjs";
diff --git a/packages/web-components/src/components/Attachment/styles.scss b/packages/web-components/src/components/Attachment/styles.scss
index e17f891d9db..f14837bb2f8 100644
--- a/packages/web-components/src/components/Attachment/styles.scss
+++ b/packages/web-components/src/components/Attachment/styles.scss
@@ -239,9 +239,10 @@
 }
 
 .markdown-attachment-preview {
-  padding: 0 16px;
+  padding: 8px 16px;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
-  max-height: 100%;
 }
 
 .test-result-attachment-video {
diff --git a/packages/web-components/src/components/Modal/styles.scss b/packages/web-components/src/components/Modal/styles.scss
index a3e0a31505b..7dc4d7e8c20 100644
--- a/packages/web-components/src/components/Modal/styles.scss
+++ b/packages/web-components/src/components/Modal/styles.scss
@@ -71,6 +71,13 @@
   :global(.attachmentViewPane):not([hidden]) {
     flex: 1;
     min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :global(.html-attachment-preview) {
+    flex: 1;
+    min-height: 0;
   }
 }
 

From 9963e6019916cad16de24e8752d0e4d56e78b777 Mon Sep 17 00:00:00 2001
From: Todti <hello@iamtodt.com>
Date: Tue, 9 Jun 2026 19:05:09 +0100
Subject: [PATCH 3/4] fix: expand button and markdown scroll overshoot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix expand button opening in source code: the actual expand icon lives
  in TrAttachmentInfo, not TrAttachment — pass preview: isPreviewable
  and previewable: isPreviewable there (and in the item-change effect)
- Fix markdown preview scrolling past content: vertical padding on the
  container div caused the iframe (sized to content height) to overflow
  the container, making the last 16px scrollable past actual content.
  Move vertical padding inside the iframe body so getIframeContentHeight
  includes it in the measurement and container overflow is eliminated.
---
 .../TestResult/TrSteps/TrAttachmentInfo.tsx          | 12 ++++++++++--
 .../src/components/Attachment/MarkdownPreview.tsx    |  2 +-
 .../src/components/Attachment/styles.scss            |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx
index b0d31e75aac..1a51c455342 100644
--- a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx
+++ b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx
@@ -47,10 +47,11 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
     event.stopPropagation();
     openModal({
       data: item,
+      preview: isPreviewable,
       component: (
         <Attachment
           item={item}
-          previewable={true}
+          previewable={isPreviewable}
           i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
         />
       ),
@@ -62,7 +63,14 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
       openModal({
         isModalOpen: true,
         data: item,
-        component: <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />,
+        preview: isPreviewable,
+        component: (
+          <Attachment
+            item={item}
+            previewable={isPreviewable}
+            i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
+          />
+        ),
       });
     }
   }, [item, tAttachments]);
diff --git a/packages/web-components/src/components/Attachment/MarkdownPreview.tsx b/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
index 62402a41aa7..c1cc4460819 100644
--- a/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
+++ b/packages/web-components/src/components/Attachment/MarkdownPreview.tsx
@@ -46,7 +46,7 @@ export const MarkdownPreview: FunctionalComponent<MarkdownAttachmentPreviewProps
     <meta charset="utf-8">
     <style>:root {${iframeThemeVars}}</style>
     <style>${proseStyles}</style>
-    <style>html, body { margin: 0; }</style>
+    <style>html, body { margin: 0; } body { padding: 8px 0; }</style>
   </head>
   <body>${sanitized}</body>
 </html>`;
diff --git a/packages/web-components/src/components/Attachment/styles.scss b/packages/web-components/src/components/Attachment/styles.scss
index f14837bb2f8..1cf841463ce 100644
--- a/packages/web-components/src/components/Attachment/styles.scss
+++ b/packages/web-components/src/components/Attachment/styles.scss
@@ -239,7 +239,7 @@
 }
 
 .markdown-attachment-preview {
-  padding: 8px 16px;
+  padding: 0 16px;
   flex: 1;
   min-height: 0;
   overflow-y: auto;

From 12cf02dec0d6e69fbf91240087f970c60c4ec09d Mon Sep 17 00:00:00 2001
From: Todti <hello@iamtodt.com>
Date: Tue, 9 Jun 2026 19:05:28 +0100
Subject: [PATCH 4/4] fix: add isPreviewable to useEffect deps in
 TrAttachmentInfo

---
 .../src/components/TestResult/TrSteps/TrAttachmentInfo.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx
index 1a51c455342..24e05eb86f9 100644
--- a/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx
+++ b/packages/web-awesome/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx
@@ -73,7 +73,7 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
         ),
       });
     }
-  }, [item, tAttachments]);
+  }, [item, isPreviewable, tAttachments]);
 
   const downloadData = async (e: MouseEvent) => {
     e.stopPropagation();