fix: Improve link preview image display (#17100)

wireapp · Mar 19, 2024 · f106a01 · f106a01
1 parent dfb4b46
commit f106a01
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/...script/components/MessagesList/Message/ContentMessage/asset/LinkPreviewAssetComponent.tsx b/...script/components/MessagesList/Message/ContentMessage/asset/LinkPreviewAssetComponent.tsx
@@ -93,7 +93,12 @@ const LinkPreviewAsset: React.FC<LinkPreviewAssetProps> = ({header = false, mess
     >
       <div className="link-preview-image-container">
         {preview && previewImage ? (
-          <Image className="link-preview-image" image={previewImage} data-uie-name="link-preview-image" />
+          <Image
+            className="link-preview-image"
+            imageStyles={{height: '100%', objectFit: 'cover', objectPosition: 'center'}}
+            image={previewImage}
+            data-uie-name="link-preview-image"
+          />
         ) : (
           <div className="link-preview-image-placeholder icon-link" />
         )}

diff --git a/src/style/components/asset/link-preview-asset.less b/src/style/components/asset/link-preview-asset.less
@@ -18,7 +18,7 @@
  */
 
 // variables
-@link-preview-height: 88px;
+@link-preview-height: 5.5rem;
 
 .link-preview-asset {
   .asset-container-style;
@@ -33,6 +33,7 @@
 
 .link-preview-image-container {
   width: @link-preview-height;
+  height: @link-preview-height;
   flex: 0 0 auto;
   background-color: var(--foreground-fade-24);
 }