From e27aa15e1281d810dfbce65039331fe26a41accc Mon Sep 17 00:00:00 2001
From: alvaromartmart <alvaro.mart.mart+dev@gmail.com>
Date: Mon, 24 Jun 2024 23:42:36 +0200
Subject: [PATCH] tweak: add hr between attachments

---
 packages/trace-viewer/src/ui/attachmentsTab.css |  4 ++++
 packages/trace-viewer/src/ui/attachmentsTab.tsx | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/trace-viewer/src/ui/attachmentsTab.css b/packages/trace-viewer/src/ui/attachmentsTab.css
index b4708796ce..d838701e01 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.css
+++ b/packages/trace-viewer/src/ui/attachmentsTab.css
@@ -53,3 +53,7 @@
   border-radius: 2px;
   padding: 0.5rem;
 }
+
+.attachment-item hr {
+  border: 0.2px solid var(--vscode-panel-border);
+}
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index f2b3d9984b..331bf9bcec 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -106,13 +106,16 @@ export const AttachmentsTab: React.FunctionComponent<{
     })}
     {attachments.size ? <div className='attachments-section'>Attachments</div> : undefined}
     {[...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} /> :
-          <div><i>no preview available</i></div>
-        }
-      </div>;
+      return <>
+        { i > 0 && <hr /> }
+        <div className='attachment-item' key={`attachment-${i}`}>
+          <a href={attachmentURL(a) + '&download'}>{a.name}</a>
+          { isTextualMimeType(a.contentType) ?
+            <TextAttachment attachment={a} /> :
+            <div><i>no preview available</i></div>
+          }
+        </div>
+      </>;
     })}
   </div>;
 };