Fix various clipping issues with message buttons

signalapp · Sep 30, 2021 · 3534408 · 3534408
1 parent 19e700a
commit 3534408
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -1170,21 +1170,20 @@ export class Message extends React.PureComponent<Props, State> {
     );
   }
 
+  public hasAvatar(): boolean {
+    const { collapseMetadata, conversationType, direction } = this.props;
+
+    return Boolean(
+      !collapseMetadata &&
+        conversationType === 'group' &&
+        direction !== 'outgoing'
+    );
+  }
+
   public renderAvatar(): JSX.Element | undefined {
-    const {
-      author,
-      collapseMetadata,
-      conversationType,
-      direction,
-      i18n,
-      showContactModal,
-    } = this.props;
+    const { author, i18n, showContactModal } = this.props;
 
-    if (
-      collapseMetadata ||
-      conversationType !== 'group' ||
-      direction === 'outgoing'
-    ) {
+    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