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 { ); } - 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 { '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