From b938f6620be7b38154c14033730ee5f3267402c0 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 14 Nov 2021 18:46:46 +0000
Subject: [PATCH] fix: prevent reply overflow

fixes #399
---
 .../common/messaging/attachments/MessageReply.tsx     |  6 +++++-
 src/components/common/messaging/bars/ReplyBar.tsx     | 11 +++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index af8b512d..d1061d7e 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -84,12 +84,16 @@ export const ReplyBase = styled.div<{
     }
 
     .content {
-        padding: 2px 0;
+        max-height: 32px;
+
         gap: 4px;
         display: flex;
+        padding: 2px 0;
         cursor: pointer;
+        overflow: hidden;
         align-items: center;
         flex-direction: row;
+
         transition: filter 1s ease-in-out;
         transition: transform ease-in-out 0.1s;
         filter: brightness(1);
diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index 461c5eb2..c8c4aa8d 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -65,6 +65,7 @@ const Base = styled.div`
 
     .message {
         display: flex;
+        max-height: 26px;
     }
 
     .actions {
@@ -152,7 +153,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                     </>
                                 )}
                                 {message.author_id ===
-                                    "00000000000000000000000000" ? (
+                                "00000000000000000000000000" ? (
                                     <SystemMessage message={message} hideInfo />
                                 ) : (
                                     <Markdown
@@ -191,7 +192,13 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                     }}>
                                     <span class="toggle">
                                         <At size={15} />
-                                        <Text id={reply.mention ? 'general.on' : 'general.off'} />
+                                        <Text
+                                            id={
+                                                reply.mention
+                                                    ? "general.on"
+                                                    : "general.off"
+                                            }
+                                        />
                                     </span>
                                 </IconButton>
                             )}