diff --git a/packages/trace-viewer/src/ui/attachmentsTab.css b/packages/trace-viewer/src/ui/attachmentsTab.css
index db22a72f5d..c2455fc3c5 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.css
+++ b/packages/trace-viewer/src/ui/attachmentsTab.css
@@ -40,6 +40,11 @@
   margin: 4px 8px;
 }
 
+.attachment-title-highlight {
+  text-decoration: underline var(--vscode-terminal-findMatchBackground);
+  text-decoration-thickness: 1.5px;
+}
+
 .attachment-item img {
   flex: none;
   min-width: 200px;
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 7003cc717f..d26089265e 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -24,6 +24,7 @@ import { CodeMirrorWrapper, lineHeight } from '@web/components/codeMirrorWrapper
 import { isTextualMimeType } from '@isomorphic/mimeType';
 import { Expandable } from '@web/components/expandable';
 import { linkifyText } from '@web/renderUtils';
+import { clsx } from '@web/uiUtils';
 
 type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
 
@@ -64,7 +65,7 @@ const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> =
   }, [attachmentText]);
 
   const title = <span style={{ marginLeft: 5 }} ref={ref} aria-label={attachment.name}>
-    <span style={highlight ? { textDecoration: 'underline var(--vscode-terminal-findMatchBackground)', textDecorationThickness: 1.5 } : {}}>{linkifyText(attachment.name)}</span>
+    <span className={clsx(highlight && 'attachment-title-highlight')}>{linkifyText(attachment.name)}</span>
     {hasContent && <a style={{ marginLeft: 5 }} href={downloadURL(attachment)}>download</a>}
   </span>;