Fix image alignment issues

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
matrix-org · Jul 13, 2021 · 866a11d · 866a11d
1 parent fca5125
commit 866a11d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git 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
@@ -332,7 +332,12 @@ export default class MImageBody extends React.Component<IProps, IState> {
     _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<IProps, IState> {
         }
 
         // The maximum height of the thumbnail as it is rendered as an <img>
-        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<IProps, IState> {
         }
 
         const thumbnail = (
-            <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
+            <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
-                <div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
+                <div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
                 { showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail

diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx
@@ -42,17 +42,19 @@ export default class MImageReplyBody extends MImageBody {
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
 
         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 = <SenderProfile
             mxEvent={this.props.mxEvent}
             enableFlair={false}
         />;
 
         return <div className="mx_MImageReplyBody">
-            <div className="mx_MImageReplyBody_thumbnail">{ thumbnail }</div>
-            <div className="mx_MImageReplyBody_sender">{ sender }</div>
-            <div className="mx_MImageReplyBody_filename">{ fileBody }</div>
+            { thumbnail }
+            <div className="mx_MImageReplyBody_info">
+                <div className="mx_MImageReplyBody_sender">{ sender }</div>
+                <div className="mx_MImageReplyBody_filename">{ fileBody }</div>
+            </div>
         </div>;
     }
 }