Fix file button and audio player overflowing from message bubble (#8666)

* Fix file button and audio player overflowing from message bubble

Signed-off-by: Suguru Hirahara <[email protected]>

* Move '.mx_EventTile_image' to '.mx_EventTile_mediaLine'

Signed-off-by: Suguru Hirahara <[email protected]>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <[email protected]>

* Use class names for now, adding a TODO comment

Remove unset as it is no longer required.

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/rooms/_EventBubbleTile.scss

@@ -284,29 +284,37 @@ limitations under the License.
             z-index: 3; // above media and location share maps
         }
 
-        &.mx_EventTile_mediaLine .mx_MVoiceMessageBody {
-            // allow the event to be collapsed, this causes the waveform to get cropped
-            min-width: 0;
-        }
+        &.mx_EventTile_mediaLine {
+            // TODO: Use a common class name instead
+            .mx_MFileBody,
+            .mx_MAudioBody {
+                max-width: 100%; // avoid overflow
+            }
 
-        // 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
+            .mx_MVoiceMessageBody {
+                // allow the event to be collapsed, this causes the waveform to get cropped
+                min-width: 0;
             }
 
-            // linear gradient to make the timestamp more visible
-            .mx_MImageBody::before {
-                content: "";
-                position: absolute;
-                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
-                z-index: 1;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                pointer-events: none;
+            // 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_image {
+                .mx_MessageTimestamp {
+                    color: #ffffff; // regardless of theme, always visible on the below gradient
+                }
+
+                // linear gradient to make the timestamp more visible
+                .mx_MImageBody::before {
+                    content: "";
+                    position: absolute;
+                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+                    z-index: 1;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    pointer-events: none;
+                }
             }
         }
 

res/css/views/rooms/_EventTile.scss

@@ -903,10 +903,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             .mx_EventTile_line.mx_EventTile_mediaLine {
                 padding: 0;
                 max-width: 100%;
-
-                .mx_MFileBody {
-                    width: 100%;
-                }
             }
 
             &[data-self=true] {