diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 7b97513c2d..f2b3d9984b 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -20,7 +20,7 @@ import { ImageDiffView } from '@web/shared/imageDiffView';
 import type { MultiTraceModel } from './modelUtil';
 import { PlaceholderPanel } from './placeholderPanel';
 import type { AfterActionTraceEventAttachment } from '@trace/trace';
-
+import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import { isTextualMimeType } from '@isomorphic/mimeType';
 
 
@@ -43,10 +43,9 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
       isMounted = false;
     };
   }, [attachment]);
-
-  return <div aria-label={attachment.name} className="attachment-item__text">
-    {text!}
-  </div>;
+  return text ?
+    <CodeMirrorWrapper text={text} readOnly wrapLines={false}></CodeMirrorWrapper> :
+    <div><i>Loading...</i></div>;
 };
 
 export const AttachmentsTab: React.FunctionComponent<{
@@ -109,8 +108,9 @@ export const AttachmentsTab: React.FunctionComponent<{
     {[...attachments.values()].map((a, i) => {
       return <div className='attachment-item' key={`attachment-${i}`}>
         <a href={attachmentURL(a) + '&download'}>{a.name}</a>
-        { isTextualMimeType(a.contentType) &&
-          <TextAttachment attachment={a} />
+        { isTextualMimeType(a.contentType) ?
+          <TextAttachment attachment={a} /> :
+          <div><i>no preview available</i></div>
         }
       </div>;
     })}
diff --git a/tests/playwright-test/ui-mode-test-attachments.spec.ts b/tests/playwright-test/ui-mode-test-attachments.spec.ts
index b02c914110..277ffde39a 100644
--- a/tests/playwright-test/ui-mode-test-attachments.spec.ts
+++ b/tests/playwright-test/ui-mode-test-attachments.spec.ts
@@ -25,7 +25,7 @@ test('should contain text attachment', async ({ runUITest }) => {
       test('attach test', async () => {
         await test.info().attach('note', { path: __filename });
         await test.info().attach('🎭', { body: 'hi tester!', contentType: 'text/plain' });
-        await test.info().attach('escaped', { body: '<div>\\nFoo\\nBar\\n</div>', contentType: 'text/plain' });
+        await test.info().attach('escaped', { body: '## Header\\n\\n> TODO: some todo\\n- _Foo_\\n- **Bar**', contentType: 'text/plain' });
       });
     `,
   });
@@ -36,7 +36,7 @@ test('should contain text attachment', async ({ runUITest }) => {
   for (const { name, content, displayedAsText } of [
     { name: 'note', content: 'attach test', displayedAsText: false },
     { name: '🎭', content: 'hi tester!', displayedAsText: true },
-    { name: 'escaped', content: '<div>\nFoo\nBar\n</div>', displayedAsText: true },
+    { name: 'escaped', content: '## Header\\n\\n> TODO: some todo\\n- _Foo_\\n- **Bar**', displayedAsText: true },
   ]) {
     await page.getByText(`attach "${name}"`, { exact: true }).click();
     const downloadPromise = page.waitForEvent('download');
@@ -47,6 +47,7 @@ test('should contain text attachment', async ({ runUITest }) => {
     expect(download.suggestedFilename()).toBe(name);
     expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content);
   }
+  await page.pause();
 });
 
 test('should contain binary attachment', async ({ runUITest }) => {