From 2d9fa81cf5962c8f5216eda99ac8b765e13b00bb Mon Sep 17 00:00:00 2001 From: Robin Date: Sat, 3 Dec 2022 17:31:40 -0500 Subject: [PATCH] Improve the visual balance of bubble layout (#9704) --- res/css/views/rooms/_EventBubbleTile.pcss | 4 +++- res/css/views/rooms/_EventTile.pcss | 5 +++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss index ca9ec513f8..6b288cd91e 100644 --- a/res/css/views/rooms/_EventBubbleTile.pcss +++ b/res/css/views/rooms/_EventBubbleTile.pcss @@ -43,7 +43,9 @@ limitations under the License. --EventTile_bubble_gap-inline: 5px; position: relative; - margin-top: var(--gutterSize); + /* Other half of the gutter is provided by margin-bottom on the last tile + of the section */ + margin-top: calc(var(--gutterSize) / 2); margin-left: var(--EventTile_bubble-margin-inline-start); font-size: $font-14px; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 55702c787b..58e04bc17d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -462,6 +462,11 @@ $left-gutter: 64px; &.mx_EventTile_continuation { margin-top: 2px; } + &.mx_EventTile_lastInSection { + /* Other half of the gutter is provided by margin-top on the first + tile of the section */ + margin-bottom: calc(var(--gutterSize) / 2); + } } }