From 1b7e9d95daa751c7a2e41b3a058aa56d7758ffe5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 11:36:17 +0000 Subject: [PATCH] Fix flex blowout on image reply (#8809) * Set min-width to prevent a flex blowout Signed-off-by: Suguru Hirahara * Use a native spacing property Signed-off-by: Suguru Hirahara * Set max-width: 100% to display name inside the image reply Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageReplyBody.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss index 3207443d65..364a756dc8 100644 --- a/res/css/views/messages/_MImageReplyBody.scss +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -16,17 +16,21 @@ limitations under the License. .mx_MImageReplyBody { display: flex; + column-gap: $spacing-4; - .mx_MImageBody_thumbnail_container { + .mx_MImageBody_thumbnail_container, + .mx_MImageReplyBody_info { flex: 1; - margin-right: 4px; + min-width: 0; // Prevent a blowout } .mx_MImageReplyBody_info { - flex: 1; - .mx_MImageReplyBody_sender { grid-area: sender; + + .mx_DisambiguatedProfile { + max-width: 100%; + } } .mx_MImageReplyBody_filename {