From 50aa3d6c46a6bb10af5dadc86f28223bf8c91c79 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 10 Aug 2021 15:14:04 +0100
Subject: [PATCH] Upscale thumbnails to the container size

Force thumbnails to be the size of the container, even if that means
upscaling them. As per comment, this will mean that the thumbnails
will sometimes be larger and a bit blurry rather than small. It looks
like this was probably a source of scroll jumps before.

As per comment, a better fix would be to be be able to know what
size thumbnails the HS will give us so we can size the containers
appropriately.

Type: defect
Regressed by: https://github.com/matrix-org/matrix-react-sdk/pull/6514
Fixes https://github.com/vector-im/element-web/issues/18307
---
 src/components/views/messages/MImageBody.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index f682f1c8c0..4bf6b6fe14 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -347,12 +347,21 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     className="mx_MImageBody_thumbnail"
                     src={thumbUrl}
                     ref={this.image}
-                    style={{ maxWidth: `min(100%, ${maxWidth}px)` }}
+                    // Force the image to be the full size of the container, even if the
+                    // pixel size is smaller. The problem here is that we don't know what
+                    // thumbnail size the HS is going to give us, but we have to commit to
+                    // a container size immediately and not change it when the image loads
+                    // or we'll get a scroll jump (or have to leave blank space).
+                    // This will obviously result in an upscaled image which will be a bit
+                    // blurry. The best fix would be for the HS to advertise what size thumbnails
+                    // it guarantees to produce.
+                    style={{ height: '100%' }}
                     alt={content.body}
                     onError={this.onImageError}
                     onLoad={this.onImageLoad}
                     onMouseEnter={this.onImageEnter}
-                    onMouseLeave={this.onImageLeave} />
+                    onMouseLeave={this.onImageLeave}
+                />
             );
         }
 
@@ -379,7 +388,10 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     </div>
                 }
 
-                <div style={{ display: !showPlaceholder ? undefined : 'none' }}>
+                <div style={{
+                    display: !showPlaceholder ? undefined : 'none',
+                    height: '100%', // Also force to size of a parent to prevent scroll-jumps (see above)
+                }}>
                     { img }
                     { gifLabel }
                 </div>