OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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>
pull/28788/head^2
Suguru Hirahara 2022-05-24 07:06:04 +00:00 committed by GitHub
parent ef977146c3
commit 9f1bffcd34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -284,14 +284,21 @@ limitations under the License.
z-index: 3; // above media and location share maps z-index: 3; // above media and location share maps
} }
&.mx_EventTile_mediaLine .mx_MVoiceMessageBody { &.mx_EventTile_mediaLine {
// TODO: Use a common class name instead
.mx_MFileBody,
.mx_MAudioBody {
max-width: 100%; // avoid overflow
}
.mx_MVoiceMessageBody {
// allow the event to be collapsed, this causes the waveform to get cropped // allow the event to be collapsed, this causes the waveform to get cropped
min-width: 0; min-width: 0;
} }
// we put the timestamps for media (other than stickers) atop the media // 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 // for images we also apply a linear gradient and change the timestamp colour to aid readability
&.mx_EventTile_mediaLine.mx_EventTile_image { &.mx_EventTile_image {
.mx_MessageTimestamp { .mx_MessageTimestamp {
color: #ffffff; // regardless of theme, always visible on the below gradient color: #ffffff; // regardless of theme, always visible on the below gradient
} }
@ -309,6 +316,7 @@ limitations under the License.
pointer-events: none; pointer-events: none;
} }
} }
}
&.mx_EventTile_sticker { &.mx_EventTile_sticker {
> a, // timestamp wrapper anchor > a, // timestamp wrapper anchor

4
res/css/views/rooms/_EventTile.scss
View File

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