Bubble layout fixes to media events (#7615)

res/css/views/rooms/_EventBubbleTile.scss

@@ -128,8 +128,9 @@ limitations under the License.
 
             .mx_MImageBody .mx_MImageBody_thumbnail,
             .mx_MImageBody::before,
+            .mx_MediaBody,
             .mx_MLocationBody_map {
-                border-bottom-right-radius: var(--cornerRadius);
+                border-bottom-right-radius: var(--cornerRadius) !important;
             }
         }
 
@@ -151,8 +152,9 @@ limitations under the License.
 
             .mx_MImageBody .mx_MImageBody_thumbnail,
             .mx_MImageBody::before,
+            .mx_MediaBody,
             .mx_MLocationBody_map {
-                border-bottom-left-radius: var(--cornerRadius);
+                border-bottom-left-radius: var(--cornerRadius) !important;
             }
         }
 
@@ -215,8 +217,14 @@ limitations under the License.
             z-index: 3; // above media and location share maps
         }
 
-        // we put the timestamps for media (other than stickers) atop the media along with a gradient to aid visibility
+        &.mx_EventTile_mediaLine .mx_MVoiceMessageBody {
-        &.mx_EventTile_mediaLine:not(.mx_EventTile_sticker) {
+            // allow the event to be collapsed, this causes the waveform to get cropped
+            min-width: 0;
+        }
+
+        // we put the timestamps for media (other than stickers) atop the media
+        // for images we also apply a linear gradient and change the timestamp colour to aid readability
+        &.mx_EventTile_mediaLine.mx_EventTile_image {
             .mx_MessageTimestamp {
                 color: #ffffff; // regardless of theme, always visible on the below gradient
             }
@@ -248,26 +256,23 @@ limitations under the License.
             }
         }
 
-        //noinspection CssReplaceWithShorthandSafely
         .mx_MImageBody {
             width: 100%;
             height: 100%;
 
-            //noinspection CssReplaceWithShorthandSafely
+            .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
-            .mx_MImageBody_thumbnail {
+                position: unset;
-                // Note: This is intentionally not compressed because the browser gets confused
-                // when it is all combined. We're effectively unsetting the border radius then
-                // setting the two corners we care about manually.
-                border-radius: unset;
-                border-top-left-radius: var(--cornerRadius);
-                border-top-right-radius: var(--cornerRadius);
-
-                &.mx_MImageBody_thumbnail--blurhash {
-                    position: unset;
-                }
             }
         }
 
+        //noinspection CssReplaceWithShorthandSafely
+        .mx_MImageBody .mx_MImageBody_thumbnail,
+        .mx_MediaBody {
+            border-radius: unset;
+            border-top-left-radius: var(--cornerRadius);
+            border-top-right-radius: var(--cornerRadius);
+        }
+
         .mx_EventTile_e2eIcon {
             flex-shrink: 0; // keep it at full size
         }
@@ -284,6 +289,7 @@ limitations under the License.
 
         .mx_MImageBody .mx_MImageBody_thumbnail,
         .mx_MImageBody::before,
+        .mx_MediaBody,
         .mx_MLocationBody_map {
             border-top-left-radius: 0;
         }
@@ -293,6 +299,7 @@ limitations under the License.
 
         .mx_MImageBody .mx_MImageBody_thumbnail,
         .mx_MImageBody::before,
+        .mx_MediaBody,
         .mx_MLocationBody_map {
             border-bottom-left-radius: var(--cornerRadius);
         }
@@ -303,6 +310,7 @@ limitations under the License.
 
         .mx_MImageBody .mx_MImageBody_thumbnail,
         .mx_MImageBody::before,
+        .mx_MediaBody,
         .mx_MLocationBody_map {
             border-top-right-radius: 0;
         }
@@ -312,6 +320,7 @@ limitations under the License.
 
         .mx_MImageBody .mx_MImageBody_thumbnail,
         .mx_MImageBody::before,
+        .mx_MediaBody,
         .mx_MLocationBody_map {
             border-bottom-right-radius: var(--cornerRadius);
         }
@@ -523,9 +532,11 @@ limitations under the License.
 // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
 // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
 .mx_EventListSummary[data-expanded=true][data-layout=bubble] {
+    display: flex;
+    flex-direction: column;
     margin: 0;
 
-    .mx_EventTile {
+    .mx_EventTile_info {
         padding: 2px 0;
         margin-right: 0;
 

src/components/views/rooms/EventTile.tsx

@@ -1121,6 +1121,10 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         const lineClasses = classNames("mx_EventTile_line", {
             mx_EventTile_mediaLine: isProbablyMedia,
+            mx_EventTile_image: (
+                this.props.mxEvent.getType() === EventType.RoomMessage &&
+                this.props.mxEvent.getContent().msgtype === MsgType.Image
+            ),
             mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker,
             mx_EventTile_emote: (
                 this.props.mxEvent.getType() === EventType.RoomMessage &&