fix: link preview with image displayed horizontal rather than vertical

stylesheets/_modules.scss

@@ -147,6 +147,11 @@
   cursor: pointer;
   border-top-left-radius: $session_message-container-border-radius;
   border-top-right-radius: $session_message-container-border-radius;
+  display: flex;
+}
+
+.module-message__link-preview__text {
+  align-self: center;
 }
 
 .module-message__link-preview__content {
@@ -155,6 +160,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  flex-grow: 1;
   border: 1px solid $color-black-015;
 }
 
@@ -203,10 +209,6 @@
   background-color: $color-gray-05;
 }
 
-.module-message__link-preview__text--with-icon {
-  margin-top: 5px;
-}
-
 .module-message__link-preview__title {
   color: $color-gray-90;
   font-size: 16px;

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -14,7 +14,6 @@ import {
 import {
   canDisplayImage,
   getGridDimensions,
-  getImageDimensionsInAttachment,
   hasImage,
   hasVideoScreenshot,
   isImage,
@@ -22,7 +21,6 @@ import {
   isVideo,
 } from '../../../../types/Attachment';
 import { Flex } from '../../../basic/Flex';
-import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
 import { MessageAttachment } from './MessageAttachment';
 import { MessagePreview } from './MessagePreview';
 import { MessageQuote } from './MessageQuote';
@@ -168,7 +166,7 @@ export const MessageContent = (props: Props) => {
     isDeleted = selectedMsg.isDeleted;
   }
 
-  const width = getWidth({ previews, attachments });
+  const width = getWidth({ attachments });
   const isShowingImage = getIsShowingImage({ attachments, imageBroken, previews, text });
   const hasText = Boolean(text);
   const hasQuote = !isEmpty(quote);
@@ -230,10 +228,8 @@ export const MessageContent = (props: Props) => {
   );
 };
 
-function getWidth(
+function getWidth(props: Pick<MessageRenderingProps, 'attachments'>): number | undefined {
-  props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
+  const { attachments } = props;
-): number | undefined {
-  const { attachments, previews } = props;
 
   if (attachments && attachments.length) {
     const dimensions = getGridDimensions(attachments);
@@ -241,22 +237,8 @@ function getWidth(
       return dimensions.width;
     }
   }
-
+  // we do not care about the presence of a preview or not to hardcode the width.
-  if (previews && previews.length) {
+  // the width with a preview will be determined by a flexbox
-    const first = previews[0];
-
-    if (!first || !first.image) {
-      return;
-    }
-    const { width } = first.image;
-
-    if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) {
-      const dimensions = getImageDimensionsInAttachment(first.image);
-      if (dimensions) {
-        return dimensions.width;
-      }
-    }
-  }
 
   return;
 }

ts/components/conversation/message/message-content/MessagePreview.tsx

@@ -81,14 +81,7 @@ export const MessagePreview = (props: Props) => {
             </div>
           </div>
         ) : null}
-        <div
+        <div className={classNames('module-message__link-preview__text')}>
-          className={classNames(
-            'module-message__link-preview__text',
-            previewHasImage && !isFullSizeImage
-              ? 'module-message__link-preview__text--with-icon'
-              : null
-          )}
-        >
           <div className="module-message__link-preview__title">{first.title}</div>
           <div className="module-message__link-preview__location">{first.domain}</div>
         </div>