diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index ac982bf0fd8..a474c241776 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -34,9 +34,25 @@ limitations under the License. .mx_EventTile { &[data-layout=irc], &[data-layout=group] { + &.mx_EventTile_info .mx_EventTile_line, + .mx_EventTile_line { + padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); + padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden + + .mx_EventTile_e2eIcon { + inset-inline-start: $spacing-8; + } + } + + &.mx_EventTile_info { + .mx_EventTile_avatar { + inset-inline-start: 18px; + } + } + .mx_EventTile_avatar { position: absolute; // for IRC layout - left: -3px; + inset-inline-start: -3px; } .mx_EventTile_msgOption { @@ -78,27 +94,11 @@ limitations under the License. } &:not([data-layout="bubble"]) { - &.mx_EventTile_info .mx_EventTile_line, - .mx_EventTile_line { - padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); - padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden - - .mx_EventTile_e2eIcon { - inset-inline-start: 8px; - } - } - .mx_MessageTimestamp { position: absolute; // for modern layout and IRC layout inset-inline-start: auto; inset-inline-end: 0; } - - &.mx_EventTile_info { - .mx_EventTile_avatar { - left: 18px; - } - } } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 691cb32f6fe..1054357ec58 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -86,6 +86,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_MImageBody { margin-right: 34px; } + + .mx_EventTile_line, + .mx_EventTile_reply { + position: relative; + border-radius: 8px; + } + + .mx_EventTile_reply { + margin-right: 10px; + } } &[data-layout=group] { @@ -113,6 +123,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile_reply { padding-top: 1px; padding-bottom: 3px; + padding-left: $left-gutter; line-height: $font-22px; } @@ -197,17 +208,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss clear: both; } - .mx_EventTile_line, - .mx_EventTile_reply { - position: relative; - padding-left: $left-gutter; - border-radius: 8px; - } - - .mx_EventTile_reply { - margin-right: 10px; - } - /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index f7748b86093..859f7bda058 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -48,8 +48,8 @@ $irc-line-height: $font-18px; } } - .mx_EventTile_line, .mx_EventTile_reply { - padding: 0; + .mx_EventTile_line, + .mx_EventTile_reply { display: flex; flex-direction: column; order: 3;