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

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;
 }

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 {