From ed3a92f4dd79fe4fa9fea0471416b50327ab4342 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 21 May 2022 19:57:53 +0900 Subject: [PATCH 1/4] Override inline height and width values of mx_MImageBody_thumbnail_container to avoid overflow Include the block in mx_MImageBody in order to prevent unexpected style cascades Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 87a44d741bf..0d8b9d6ec85 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -54,6 +54,7 @@ $timeline-image-border-radius: 8px; } } +.mx_MImageBody { .mx_MImageBody_thumbnail_container { border-radius: $timeline-image-border-radius; @@ -66,6 +67,11 @@ $timeline-image-border-radius: 8px; display: flex; justify-content: center; align-items: center; + + // Override inline height and width values to avoid overflow + max-height: 100% !important; + max-width: 100% !important; +} } .mx_MImageBody_thumbnail { From 7b045ba41f005b07df9519d9ceccf2ba3eb24d7f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 21 May 2022 20:06:28 +0900 Subject: [PATCH 2/4] Apply the border radius to an image directly Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 0d8b9d6ec85..c69e6b79886 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -71,6 +71,12 @@ $timeline-image-border-radius: 8px; // Override inline height and width values to avoid overflow max-height: 100% !important; 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; + } } } From cea60ab3bb5ef37f45ec7ea8f7392f72e1acd8a4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 21 May 2022 20:16:56 +0900 Subject: [PATCH 3/4] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 36 ++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index c69e6b79886..0deceeb4d60 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -55,30 +55,30 @@ $timeline-image-border-radius: 8px; } .mx_MImageBody { -.mx_MImageBody_thumbnail_container { - 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 - overflow: hidden; - contain: paint; + // 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; + min-height: $font-44px; + min-width: $font-44px; + display: flex; + justify-content: center; + align-items: center; - // Override inline height and width values to avoid overflow - max-height: 100% !important; - max-width: 100% !important; + // Override inline height and width values to avoid overflow + max-height: 100% !important; + 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 { + // 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 { display: block; From 0123aad919a5ca62a9b41c594d91bff350607e0c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 21 May 2022 23:33:31 +0900 Subject: [PATCH 4/4] Remove max-height with !important Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 0deceeb4d60..56690a8f7e9 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -68,8 +68,7 @@ $timeline-image-border-radius: 8px; justify-content: center; align-items: center; - // Override inline height and width values to avoid overflow - max-height: 100% !important; + // Override inline max-width value to avoid overflow max-width: 100% !important; .mx_MImageBody_thumbnail {