PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix wide image overflowing from the thumbnail container (#8663)

Browse source
This commit is contained in:
Suguru Hirahara 2022-05-21 14:42:55 +00:00 committed by GitHub
parent c1c3ed6a9e
commit 5082d67dc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
res/css/views/messages/_MImageBody.scss
View file

@ -54,18 +54,29 @@ $timeline-image-border-radius: 8px;
} }
} }
.mx_MImageBody_thumbnail_container { .mx_MImageBody {
border-radius: $timeline-image-border-radius; .mx_MImageBody_thumbnail_container {
border-radius: $timeline-image-border-radius;
// Necessary for the border radius to apply correctly to the placeholder // Necessary for the border radius to apply correctly to the placeholder
overflow: hidden; overflow: hidden;
contain: paint; contain: paint;
min-height: $font-44px; min-height: $font-44px;
min-width: $font-44px; min-width: $font-44px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// Override inline max-width value to avoid overflow
max-width: 100% !important;
.mx_MImageBody_thumbnail {
// Apply the border radius to an image directly.
// This is necessary for images smaller than the placeholder.
border-radius: $timeline-image-border-radius;
}
}
} }
.mx_MImageBody_thumbnail { .mx_MImageBody_thumbnail {