diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index f9671c74f4..9e5d1b1cc1 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -32,6 +32,15 @@ limitations under the License. } .mx_EventTile { + &[data-layout=irc], + &[data-layout=group] { + .mx_EventTile_avatar { + position: absolute; // for IRC layout + top: 12px; + left: -3px; + } + } + &[data-layout=bubble] { &::before { z-index: auto; // enable background color on hover @@ -76,12 +85,6 @@ limitations under the License. max-width: min(calc(100% - 36px), 600px); } - .mx_EventTile_avatar { - position: absolute; // for IRC layout - top: 12px; - left: -3px; - } - .mx_MessageTimestamp { position: absolute; // for modern layout and IRC layout inset-inline-start: auto; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 8abe957ed4..b4538fe1c4 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -21,6 +21,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile { flex-shrink: 0; + .mx_EventTile_avatar { + cursor: pointer; + user-select: none; + } + .mx_EventTile_receiptSent, .mx_EventTile_receiptSending { position: relative; @@ -91,6 +96,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss z-index: 9; } + .mx_EventTile_avatar { + top: 14px; + left: $spacing-8; + } + .mx_MessageTimestamp { position: absolute; // for modern layout } @@ -120,13 +130,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss font-size: $font-14px; position: relative; - .mx_EventTile_avatar { - top: 14px; - left: 8px; - cursor: pointer; - user-select: none; - } - &.mx_EventTile_info { padding-top: 0; diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 72a2071404..edd2154e29 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -58,11 +58,9 @@ $irc-line-height: $font-18px; min-width: 0; } - > .mx_EventTile_avatar { + .mx_EventTile_avatar { order: 1; position: relative; - top: 0; - left: 0; flex-shrink: 0; height: $irc-line-height; display: flex; @@ -118,7 +116,7 @@ $irc-line-height: $font-18px; } .mx_EventTile_emote { - > .mx_EventTile_avatar { + .mx_EventTile_avatar { margin-left: calc(var(--name-width) + $icon-width + $right-padding); } }