Make triple dot menu work on really small screen widths

signalapp · Oct 5, 2021 · 87ea957 · 87ea957
1 parent 48aaf9e
commit 87ea957
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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>