From e0dea32d6fa57d9518b980852fa1808ff4cd174c Mon Sep 17 00:00:00 2001
From: Sam Samskies <samsamskies@gmail.com>
Date: Tue, 21 Feb 2023 10:57:53 -1000
Subject: [PATCH] fix long zap comment text overflow (#344)

---
 packages/app/src/Element/Reactions.css | 4 ++++
 packages/app/src/Element/Reactions.tsx | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/Element/Reactions.css b/packages/app/src/Element/Reactions.css
index 06fe0aff..69e7c380 100644
--- a/packages/app/src/Element/Reactions.css
+++ b/packages/app/src/Element/Reactions.css
@@ -92,6 +92,10 @@
   line-height: 17px;
 }
 
+.reactions-item .zap-comment {
+  width: 332px;
+}
+
 @media (max-width: 520px) {
   .reactions-view .tab.disabled {
     display: none;
diff --git a/packages/app/src/Element/Reactions.tsx b/packages/app/src/Element/Reactions.tsx
index ce702556..420d886a 100644
--- a/packages/app/src/Element/Reactions.tsx
+++ b/packages/app/src/Element/Reactions.tsx
@@ -113,7 +113,11 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
                     <ProfileImage
                       autoWidth={false}
                       pubkey={z.anonZap ? "" : z.zapper}
-                      subHeader={<>{z.content}</>}
+                      subHeader={
+                        <div className="f-ellipsis zap-comment" title={z.content}>
+                          {z.content}
+                        </div>
+                      }
                       overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
                     />
                   </div>