From 3534408c97c91276bf8f877b394d2df77a56885e Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Thu, 30 Sep 2021 14:24:23 -0700
Subject: [PATCH] Fix various clipping issues with message buttons

---
 stylesheets/_modules.scss              |  8 ++++++-
 ts/components/conversation/Message.tsx | 30 +++++++++++++-------------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 198132543e1..b59f18ce243 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -322,6 +322,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  min-width: 0;
 }
 .module-message__container {
   position: relative;
@@ -9269,7 +9270,12 @@ button.module-image__border-overlay:focus {
 @media (min-width: 835px) and (max-width: 925px) {
   .module-message {
     // Add 2px for 1px border
-    max-width: 376px;
+    max-width: 360px;
+
+    &--with-avatar {
+      // Remove 36px from avatar
+      max-width: 324px;
+    }
   }
 
   // Spec: container < 438px
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index dcc009ab756..9515dee4e5b 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -1170,21 +1170,20 @@ export class Message extends React.PureComponent<Props, State> {
     );
   }
 
-  public renderAvatar(): JSX.Element | undefined {
-    const {
-      author,
-      collapseMetadata,
-      conversationType,
-      direction,
-      i18n,
-      showContactModal,
-    } = this.props;
+  public hasAvatar(): boolean {
+    const { collapseMetadata, conversationType, direction } = this.props;
 
-    if (
-      collapseMetadata ||
-      conversationType !== 'group' ||
-      direction === 'outgoing'
-    ) {
+    return Boolean(
+      !collapseMetadata &&
+        conversationType === 'group' &&
+        direction !== 'outgoing'
+    );
+  }
+
+  public renderAvatar(): JSX.Element | undefined {
+    const { author, i18n, showContactModal } = this.props;
+
+    if (!this.hasAvatar()) {
       return undefined;
     }
 
@@ -2409,7 +2408,8 @@ export class Message extends React.PureComponent<Props, State> {
           'module-message',
           `module-message--${direction}`,
           isSelected ? 'module-message--selected' : null,
-          expiring ? 'module-message--expired' : null
+          expiring ? 'module-message--expired' : null,
+          this.hasAvatar() ? 'module-message--with-avatar' : null
         )}
         tabIndex={0}
         // We pretend to be a button because we sometimes contain buttons and a button