From 7e7e2a747313d2d9d45d67bb5019b1fc0b7ef20a Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Fri, 18 May 2018 10:27:22 +0100
Subject: [PATCH] Add more comments to explain thumbnail sizing

---
 res/css/views/messages/_MImageBody.scss     | 4 ++++
 src/components/views/messages/MImageBody.js | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 9f0e77f765..9667337f5a 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -28,6 +28,10 @@ limitations under the License.
 }
 
 .mx_MImageBody_thumbnail_container {
+    // Prevent the padding-bottom (added inline in MImageBody.js) from
+    // effecting elements below the container.
     overflow: hidden;
+
+    // Make sure the _thumbnail is positioned relative to the _container
     position: relative;
 }
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index f98432a166..656bd02840 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -230,7 +230,10 @@ export default class extends React.Component {
     }
 
     _messageContent(contentUrl, thumbUrl, content) {
+        // The maximum height of the thumbnail as it is rendered as an <img>
         const maxHeight = Math.min(THUMBNAIL_MAX_HEIGHT, content.info.h);
+        // The maximum width of the thumbnail, as dictated by it's natural
+        // maximum height.
         const maxWidth = content.info.w * maxHeight / content.info.h;
 
         let img = null;
@@ -246,6 +249,8 @@ export default class extends React.Component {
                 }} />
             </div>;
         } else if (thumbUrl && !this.state.imgError) {
+            // Restrict the width of the thumbnail here, otherwise it will fill the container
+            // which has the same width as the timeline
             img = <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                 style={{ "max-width": maxWidth + "px" }}
                 alt={content.body}