From ca92c243dbfffa362ef19b37e0e18d4de4e93e99 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 15:15:13 +0900 Subject: [PATCH 1/3] Set min-width to prevent a flex blowout Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageReplyBody.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss index 3207443d65b..cd6bc761b48 100644 --- a/res/css/views/messages/_MImageReplyBody.scss +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -17,14 +17,17 @@ limitations under the License. .mx_MImageReplyBody { display: flex; - .mx_MImageBody_thumbnail_container { + .mx_MImageBody_thumbnail_container, + .mx_MImageReplyBody_info { flex: 1; + min-width: 0; // Prevent a blowout + } + + .mx_MImageBody_thumbnail_container { margin-right: 4px; } .mx_MImageReplyBody_info { - flex: 1; - .mx_MImageReplyBody_sender { grid-area: sender; } From 384d24374d98feb28f432649de619ef3f00d631d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 15:16:10 +0900 Subject: [PATCH 2/3] Use a native spacing property Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageReplyBody.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss index cd6bc761b48..12615cef2e4 100644 --- a/res/css/views/messages/_MImageReplyBody.scss +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_MImageReplyBody { display: flex; + column-gap: $spacing-4; .mx_MImageBody_thumbnail_container, .mx_MImageReplyBody_info { @@ -23,10 +24,6 @@ limitations under the License. min-width: 0; // Prevent a blowout } - .mx_MImageBody_thumbnail_container { - margin-right: 4px; - } - .mx_MImageReplyBody_info { .mx_MImageReplyBody_sender { grid-area: sender; From a2edc1e0eb7e7033f8e886c06e04347b34eb10a0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 15:22:31 +0900 Subject: [PATCH 3/3] Set max-width: 100% to display name inside the image reply Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageReplyBody.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss index 12615cef2e4..364a756dc83 100644 --- a/res/css/views/messages/_MImageReplyBody.scss +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -27,6 +27,10 @@ limitations under the License. .mx_MImageReplyBody_info { .mx_MImageReplyBody_sender { grid-area: sender; + + .mx_DisambiguatedProfile { + max-width: 100%; + } } .mx_MImageReplyBody_filename {