diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss index 8c5cb97478..f0401d21db 100644 --- a/res/css/views/messages/_MImageReplyBody.scss +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -15,19 +15,11 @@ limitations under the License. */ .mx_MImageReplyBody { - display: grid; - grid-template: - "image sender" 20px - "image filename" 20px - / 44px auto; - grid-gap: 4px; -} - -.mx_MImageReplyBody_thumbnail { - grid-area: image; + display: flex; .mx_MImageBody_thumbnail_container { - max-height: 44px !important; + flex: 1; + padding-right: 4px; } } diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 3f5f27eca8..0acdbaf253 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -332,7 +332,12 @@ export default class MImageBody extends React.Component { _afterComponentWillUnmount() { } - protected messageContent(contentUrl: string, thumbUrl: string, content: IMediaEventContent): JSX.Element { + protected messageContent( + contentUrl: string, + thumbUrl: string, + content: IMediaEventContent, + forcedHeight?: number, + ): JSX.Element { let infoWidth; let infoHeight; @@ -367,7 +372,7 @@ export default class MImageBody extends React.Component { } // The maximum height of the thumbnail as it is rendered as an - const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight); + const maxHeight = forcedHeight || Math.min((this.props.maxImageHeight || 600), infoHeight); // The maximum width of the thumbnail, as dictated by its natural // maximum height. const maxWidth = infoWidth * maxHeight / infoHeight; @@ -407,9 +412,9 @@ export default class MImageBody extends React.Component { } const thumbnail = ( -
+
{ /* Calculate aspect ratio, using %padding will size _container correctly */ } -
+
{ showPlaceholder &&
(); const contentUrl = this.getContentUrl(); - const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content); + const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, 44); const fileBody = this.getFileBody(); const sender = ; return
-
{ thumbnail }
-
{ sender }
-
{ fileBody }
+ { thumbnail } +
+
{ sender }
+
{ fileBody }
+
; } }