Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Fix wide image overflowing from the thumbnail container #8663

Merged
merged 5 commits into from
May 21, 2022
Merged

Fix wide image overflowing from the thumbnail container #8663

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed3a92f
Override inline height and width values of mx_MImageBody_thumbnail_co…
luixxiul May 21, 2022
7b045ba
Apply the border radius to an image directly
luixxiul May 21, 2022
cea60ab
yarn run lint:style --fix
luixxiul May 21, 2022
69bbf45
Merge branch 'develop' into MImageBody
luixxiul May 21, 2022
0123aad
Remove max-height with !important
luixxiul May 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions res/css/views/messages/_MImageBody.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,30 @@ $timeline-image-border-radius: 8px;
}
}

.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;

min-height: $font-44px;
min-width: $font-44px;
display: flex;
justify-content: center;
align-items: center;
.mx_MImageBody {
.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;

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;

.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 {
Expand Down