From 87ea95735eea5812e28fed1d38499390317a3191 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 5 Oct 2021 09:58:34 -0400
Subject: [PATCH] Make triple dot menu work on really small screen widths

---
 stylesheets/_modules.scss              | 15 ++++++++++++
 ts/components/StopPropagation.tsx      |  6 ++++-
 ts/components/conversation/Message.tsx | 34 ++++++++++++++------------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index ad1e9faba7..9f87f789b3 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -262,6 +262,21 @@
       );
     }
   }
+
+  &--container {
+    border-radius: 4px;
+    height: 24px;
+    // the z-index here is so that this container is above the message and when
+    // clicked on, doesn't propagate the click event to the message.
+    z-index: 2;
+
+    @include light-theme {
+      background-color: $color-white;
+    }
+    @include dark-theme {
+      background-color: $color-gray-95;
+    }
+  }
 }
 
 .module-message__buttons__menu--incoming {
diff --git a/ts/components/StopPropagation.tsx b/ts/components/StopPropagation.tsx
index 9937de0824..e2d29e372f 100644
--- a/ts/components/StopPropagation.tsx
+++ b/ts/components/StopPropagation.tsx
@@ -6,10 +6,14 @@ import React, { ReactNode } from 'react';
 // Whenever you don't want click events to propagate into their parent container
 export const StopPropagation = ({
   children,
+  className,
 }: {
   children: ReactNode;
+  className?: string;
 }): JSX.Element => (
   // eslint-disable-next-line max-len
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-  <div onClick={ev => ev.stopPropagation()}>{children}</div>
+  <div className={className} onClick={ev => ev.stopPropagation()}>
+    {children}
+  </div>
 );
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 56c4d75939..a29533963f 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -1407,22 +1407,24 @@ export class Message extends React.PureComponent<Props, State> {
           const maybePopperRef = !isWide ? popperRef : undefined;
 
           return (
-            <ContextMenuTrigger
-              id={triggerId}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              ref={this.captureMenuTrigger as any}
-            >
-              <div
-                ref={maybePopperRef}
-                role="button"
-                onClick={this.showMenu}
-                aria-label={i18n('messageContextMenuButton')}
-                className={classNames(
-                  'module-message__buttons__menu',
-                  `module-message__buttons__download--${direction}`
-                )}
-              />
-            </ContextMenuTrigger>
+            <StopPropagation className="module-message__buttons__menu--container">
+              <ContextMenuTrigger
+                id={triggerId}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ref={this.captureMenuTrigger as any}
+              >
+                <div
+                  ref={maybePopperRef}
+                  role="button"
+                  onClick={this.showMenu}
+                  aria-label={i18n('messageContextMenuButton')}
+                  className={classNames(
+                    'module-message__buttons__menu',
+                    `module-message__buttons__download--${direction}`
+                  )}
+                />
+              </ContextMenuTrigger>
+            </StopPropagation>
           );
         }}
       </Reference>