diff --git a/packages/html-reporter/src/links.css b/packages/html-reporter/src/links.css
index 4abe8a6caa..d310ba7026 100644
--- a/packages/html-reporter/src/links.css
+++ b/packages/html-reporter/src/links.css
@@ -98,7 +98,6 @@
 .attachment-body {
   white-space: pre-wrap;
   background-color: var(--color-canvas-subtle);
-  margin-left: 24px;
   line-height: normal;
   padding: 8px;
   font-family: monospace;
diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 935b77f7b5..cf21d73518 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -87,7 +87,7 @@ export const AttachmentLink: React.FunctionComponent<{
         : <span>{linkifyText(attachment.name)}</span>
     )}
   </span>} loadChildren={attachment.body ? () => {
-    return [<div key={1} className='attachment-body'><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
+    return [<div key={1} className='attachment-body' style={{ marginLeft: 24 + (depth ?? 0) * 22 + 4 }}><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
   } : undefined} depth={depth ?? 0} style={{ lineHeight: '32px' }}></TreeItem>;
 };