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

matrix-org · May 21, 2022 · 5082d67 · 5082d67
1 parent c1c3ed6
commit 5082d67
Showing 1 changed file with 23 additions and 12 deletions.
diff --git 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 {