diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 87a44d741bf..56690a8f7e9 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -54,18 +54,29 @@ $timeline-image-border-radius: 8px; } } -.mx_MImageBody_thumbnail_container { - border-radius: $timeline-image-border-radius; - - // Necessary for the border radius to apply correctly to the placeholder - overflow: hidden; - contain: paint; - - min-height: $font-44px; - min-width: $font-44px; - display: flex; - justify-content: center; - align-items: center; +.mx_MImageBody { + .mx_MImageBody_thumbnail_container { + border-radius: $timeline-image-border-radius; + + // Necessary for the border radius to apply correctly to the placeholder + overflow: hidden; + contain: paint; + + min-height: $font-44px; + min-width: $font-44px; + display: flex; + justify-content: 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 {