From a21765757d06eb7808b0115643f69436466c5fcc Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 30 Oct 2020 22:50:59 +0100
Subject: [PATCH] don't use position: absolute for scaling images in the
 timeline

as it bleeds through the lightbox on IE11, and is a bad idea anyway
---
 .../web/ui/css/themes/element/theme.css       | 32 ++++++++++++++++---
 src/platform/web/ui/css/timeline.css          | 15 ++-------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 33d5c6f0..f11b658e 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -505,11 +505,6 @@ ul.Timeline > li.messageStatus .message-container > p {
     --avatar-size: 25px;
 }
 
-.message-container img.picture {
-    margin-top: 4px;
-    border-radius: 4px;
-}
-
 .TextMessageView.continuation .message-container {
     margin-top: 0;
     margin-bottom: 0;
@@ -538,6 +533,33 @@ ul.Timeline > li.messageStatus .message-container > p {
     color: #aaa;
 }
 
+
+.message-container a.picture {
+    display: grid;
+    text-decoration: none;
+    overflow: hidden;
+    margin-top: 4px;
+    border-radius: 4px;
+}
+
+.message-container a.picture > img {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+}
+
+.message-container a.picture > time {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    align-self: end;
+    justify-self: end;
+    color: #2e2f32;
+    display: block;
+    padding: 2px;
+    margin: 4px;
+    background-color: rgba(255, 255, 255, 0.75);
+    border-radius: 4px;
+}
+
 .TextMessageView.pending .message-container {
     color: #ccc;
 }
diff --git a/src/platform/web/ui/css/timeline.css b/src/platform/web/ui/css/timeline.css
index 44ff29d6..5a45f56b 100644
--- a/src/platform/web/ui/css/timeline.css
+++ b/src/platform/web/ui/css/timeline.css
@@ -37,23 +37,14 @@ limitations under the License.
     margin: 5px 0;
 }
 
-.message-container a {
+.message-container a.picture {
     display: block;
-    position: relative;
-    max-width: 100%;
-    /* width and padding-top set inline to maintain aspect ratio,
-    replace with css aspect-ratio once supported */
 }
 
-.message-container img.picture {
+.message-container a.picture > img {
     display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     width: 100%;
-    height: 100%;
+    height: auto;
 }
 
 .TextMessageView {