mirror of https://github.com/vector-im/riot-web
Fix wide image overflowing from the thumbnail container (#8663)
parent
c1c3ed6a9e
commit
5082d67dc1
|
@ -54,7 +54,8 @@ $timeline-image-border-radius: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MImageBody_thumbnail_container {
|
.mx_MImageBody {
|
||||||
|
.mx_MImageBody_thumbnail_container {
|
||||||
border-radius: $timeline-image-border-radius;
|
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
|
||||||
|
@ -66,6 +67,16 @@ $timeline-image-border-radius: 8px;
|
||||||
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 {
|
||||||
|
|
Loading…
Reference in New Issue