From d86d024a0a244dc9e5e0d01d99b9546810a77694 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 30 Aug 2022 14:05:10 +1000
Subject: [PATCH] fix: link preview with image displayed horizontal rather than
 vertical

---
 stylesheets/_modules.scss                     | 10 ++++---
 .../message-content/MessageContent.tsx        | 28 ++++---------------
 .../message-content/MessagePreview.tsx        |  9 +-----
 3 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 5950e22d3..d2ca2a584 100644
--- a/stylesheets/_modules.scss
+++ b/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;
diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
index 5159389ce..aa60569d5 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/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(
-  props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
-): number | undefined {
-  const { attachments, previews } = props;
+function getWidth(props: Pick<MessageRenderingProps, 'attachments'>): number | undefined {
+  const { attachments } = props;
 
   if (attachments && attachments.length) {
     const dimensions = getGridDimensions(attachments);
@@ -241,22 +237,8 @@ function getWidth(
       return dimensions.width;
     }
   }
-
-  if (previews && previews.length) {
-    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;
-      }
-    }
-  }
+  // we do not care about the presence of a preview or not to hardcode the width.
+  // the width with a preview will be determined by a flexbox
 
   return;
 }
diff --git a/ts/components/conversation/message/message-content/MessagePreview.tsx b/ts/components/conversation/message/message-content/MessagePreview.tsx
index 0550a9e71..3ae21fc31 100644
--- a/ts/components/conversation/message/message-content/MessagePreview.tsx
+++ b/ts/components/conversation/message/message-content/MessagePreview.tsx
@@ -81,14 +81,7 @@ export const MessagePreview = (props: Props) => {
             </div>
           </div>
         ) : null}
-        <div
-          className={classNames(
-            'module-message__link-preview__text',
-            previewHasImage && !isFullSizeImage
-              ? 'module-message__link-preview__text--with-icon'
-              : null
-          )}
-        >
+        <div className={classNames('module-message__link-preview__text')}>
           <div className="module-message__link-preview__title">{first.title}</div>
           <div className="module-message__link-preview__location">{first.domain}</div>
         </div>