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 <luixxiul@users.noreply.github.com>

* Move '.mx_EventTile_image' to '.mx_EventTile_mediaLine'

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use class names for now, adding a TODO comment

Remove unset as it is no longer required.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

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] {