Fix flex blowout on image reply (#8809)

* Set min-width to prevent a flex blowout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a native spacing property

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set max-width: 100% to display name inside the image reply

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-10 11:36:17 +00:00 committed by GitHub
parent 0d3fe300aa
commit 1b7e9d95da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -16,17 +16,21 @@ limitations under the License.
.mx_MImageReplyBody { .mx_MImageReplyBody {
display: flex; display: flex;
column-gap: $spacing-4;
.mx_MImageBody_thumbnail_container { .mx_MImageBody_thumbnail_container,
.mx_MImageReplyBody_info {
flex: 1; flex: 1;
margin-right: 4px; min-width: 0; // Prevent a blowout
} }
.mx_MImageReplyBody_info { .mx_MImageReplyBody_info {
flex: 1;
.mx_MImageReplyBody_sender { .mx_MImageReplyBody_sender {
grid-area: sender; grid-area: sender;
.mx_DisambiguatedProfile {
max-width: 100%;
}
} }
.mx_MImageReplyBody_filename { .mx_MImageReplyBody_filename {