From 7ea945c1579130400a27b1487519b795821cdac7 Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Tue, 12 Sep 2023 12:52:16 -0700
Subject: [PATCH] Fix Message Detail Reaction Viewer overflow (#6239)

---
 ts/components/conversation/MessageDetail.tsx | 11 ++++-------
 ts/util/lint/exceptions.json                 |  5 +++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index 8fd84177a..704dbb4dd 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -149,7 +149,7 @@ export function MessageDetail({
   toggleSafetyNumberModal,
   viewStory,
 }: Props): JSX.Element {
-  const messageContainerRef = useRef<HTMLDivElement>(null);
+  const messageDetailRef = useRef<HTMLDivElement>(null);
 
   function renderAvatar(contact: Contact): JSX.Element {
     const {
@@ -315,19 +315,16 @@ export function MessageDetail({
     : undefined;
 
   return (
-    <div className="module-message-detail">
+    <div className="module-message-detail" ref={messageDetailRef}>
       <PanelSection>
-        <div
-          className="module-message-detail__message-container"
-          ref={messageContainerRef}
-        >
+        <div className="module-message-detail__message-container">
           <Message
             {...message}
             renderingContext="conversation/MessageDetail"
             checkForAccount={checkForAccount}
             clearTargetedMessage={clearTargetedMessage}
             contactNameColor={contactNameColor}
-            containerElementRef={messageContainerRef}
+            containerElementRef={messageDetailRef}
             containerWidthBreakpoint={WidthBreakpoint.Wide}
             renderMenu={undefined}
             disableScroll
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index b6a9413cf..264bc309b 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -2668,9 +2668,10 @@
   {
     "rule": "React-useRef",
     "path": "ts/components/conversation/MessageDetail.tsx",
-    "line": "  const messageContainerRef = useRef<HTMLDivElement>(null);",
+    "line": "  const messageDetailRef = useRef<HTMLDivElement>(null);",
     "reasonCategory": "usageTrusted",
-    "updated": "2023-04-12T15:51:28.066Z"
+    "updated": "2023-09-11T22:53:43.464Z",
+    "reasonDetail": "Used to pass ref of MessageDetail to Message. Used for ReactionViewer overflow detection."
   },
   {
     "rule": "React-useRef",