From 1436f23e2fc7bdecc9faffb7b90ef1590548d044 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Thu, 14 Apr 2022 20:07:34 +0200
Subject: [PATCH] Fix image preview sizing for edge cases (#8322)

---
 res/css/views/messages/_MImageBody.scss      | 6 ++++++
 res/css/views/rooms/_EventBubbleTile.scss    | 5 +++++
 src/components/views/messages/MImageBody.tsx | 9 ++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index dc8ebd98044..eb3d287eaab 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -38,6 +38,12 @@ $timeline-image-border-radius: 8px;
     // Necessary for the border radius to apply correctly to the placeholder
     overflow: hidden;
     contain: paint;
+
+    min-height: $font-44px;
+    min-width: $font-44px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .mx_MImageBody_thumbnail {
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index cf257c706cc..c2992589d0f 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -114,6 +114,11 @@ limitations under the License.
         padding-right: 48px;
     }
 
+    .mx_MImageBody_thumbnail_container {
+        min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
+        min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
+    }
+
     .mx_CallEvent {
         background-color: unset;
 
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 4ef8e8d497e..5ed699b2327 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -364,10 +364,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         let infoWidth: number;
         let infoHeight: number;
+        let infoSvg = false;
 
         if (content.info?.w && content.info?.h) {
             infoWidth = content.info.w;
             infoHeight = content.info.h;
+            infoSvg = content.info.mimetype.startsWith("image/svg");
         } else {
             // Whilst the image loads, display nothing. We also don't display a blurhash image
             // because we don't really know what size of image we'll end up with.
@@ -449,6 +451,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
         });
 
+        // many SVGs don't have an intrinsic size if used in <img> elements.
+        // due to this we have to set our desired width directly.
+        // this way if the image is forced to shrink, the height adapts appropriately.
+        const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
+
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
                 <SwitchTransition mode="out-in">
@@ -463,7 +470,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     </CSSTransition>
                 </SwitchTransition>
 
-                <div style={{ maxHeight, maxWidth }}>
+                <div style={sizing}>
                     { img }
                     { gifLabel }
                 </div>