diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a0489d6b38..4fc28d0bce 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -241,6 +241,23 @@ $left-gutter: 64px; z-index: 9; } + .mx_RoomView_timeline_rr_enabled & { + $inline-end-margin: 80px; // TODO: Use a spacing variable + + .mx_ThreadSummary, + .mx_ThreadSummary_icon, + .mx_EventTile_line { + margin-right: $inline-end-margin; + min-height: $font-14px; + } + + .mx_ThreadSummary { + max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px); // leave space on both left & right gutters + } + + // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter + } + &.mx_EventTile_continuation { padding-top: 0px !important; } @@ -484,25 +501,6 @@ $left-gutter: 64px; } } -.mx_RoomView_timeline_rr_enabled { - .mx_EventTile[data-layout=group] { - - .mx_ThreadSummary, - .mx_ThreadSummary_icon, - .mx_EventTile_line { - /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ - margin-right: 80px; - min-height: $font-14px; - } - - .mx_ThreadSummary { - max-width: min(calc(100% - $left-gutter - 80px), 600px); // leave space on both left & right gutters - } - } - - // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter -} - .mx_EventTile_bigEmoji { font-size: 48px; line-height: 57px;