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>
pull/28217/head
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
1 changed files with 8 additions and 4 deletions

View File

@ -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 {