From 5446d5d6ba1b70ef410207977160af1efebaf091 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 23 May 2022 07:02:13 +0000 Subject: [PATCH] Fix position of wide images on IRC / modern layout (#8667) * Move declarations related to position from _MImageBody.scss to _EventTile.scss These declarations should not be defined as default values as position depends on other factors such as layout, etc. Signed-off-by: Suguru Hirahara * Move min-height and min-width declarations from _MImageBody.scss to _EventTile.scss Since min-height and min-width have been specified for bubble layout, the declarations have been expected to be applied to the other layouts. Signed-off-by: Suguru Hirahara * Apply 'justify-content: center' to bubble layout only 'justify-content: center' was added for the bubble layout with 1436f23. It should not be applied to the other layouts. In order to prevent an issue related to cascading from happening, 'justify-content: flex-start' is explicitly specified. Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 6 ------ res/css/views/rooms/_EventBubbleTile.scss | 9 ++++++--- res/css/views/rooms/_EventTile.scss | 13 +++++++++++++ 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 56690a8f7e..270451d808 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -62,12 +62,6 @@ $timeline-image-border-radius: 8px; overflow: hidden; contain: paint; - min-height: $font-44px; - min-width: $font-44px; - display: flex; - justify-content: center; - align-items: center; - // Override inline max-width value to avoid overflow max-width: 100% !important; diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index b28021c49e..c8449b1bb8 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -156,9 +156,12 @@ limitations under the License. padding-right: 48px; } - .mx_MImageBody_thumbnail_container { - min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); - min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); + .mx_MImageBody { + .mx_MImageBody_thumbnail_container { + justify-content: center; + min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); + min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); + } } .mx_CallEvent { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5db670c0f2..37e100e8dd 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -58,6 +58,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } + .mx_MImageBody { + .mx_MImageBody_thumbnail_container { + display: flex; + align-items: center; // on every layout + } + } + &[data-layout=group] { .mx_EventTile_line { line-height: var(--GroupLayout-EventTile-line-height); @@ -265,6 +272,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_MImageBody { margin-right: 34px; + + .mx_MImageBody_thumbnail_container { + justify-content: flex-start; + min-height: $font-44px; + min-width: $font-44px; + } } .mx_EventTile_e2eIcon {