Fix various clipping issues with message buttons

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

ts/components/conversation/Message.tsx

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