From 8c74b374929ecc917d68487a837b3c83b776b573 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Mon, 27 Jun 2022 11:20:15 -0400 Subject: [PATCH 1/2] Don't overlap tile bubbles with timestamps in modern layout --- res/css/views/messages/_EventTileBubble.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss index 3f2475663fd..34e52e494cf 100644 --- a/res/css/views/messages/_EventTileBubble.scss +++ b/res/css/views/messages/_EventTileBubble.scss @@ -19,11 +19,17 @@ limitations under the License. padding: 10px; border-radius: 8px; margin: 10px auto; - max-width: min(90%, 600px); + // Reserve space for external timestamps, but also cap the width + max-width: min(calc(100% - 2 * 48px), 600px); box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content min-content; + .mx_EventTile[data-layout=bubble] & { + // Timestamps are inside the tile, so the width can be less constrained + max-width: 600px; + } + &::before, &::after { position: relative; grid-column: 1; From eb6a561bd5c679408bb0de52548ad9dbce7d2da2 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Mon, 27 Jun 2022 13:25:07 -0400 Subject: [PATCH 2/2] Use timestamp width variable --- res/css/views/messages/_EventTileBubble.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss index 34e52e494cf..5b8925687a9 100644 --- a/res/css/views/messages/_EventTileBubble.scss +++ b/res/css/views/messages/_EventTileBubble.scss @@ -20,7 +20,7 @@ limitations under the License. border-radius: 8px; margin: 10px auto; // Reserve space for external timestamps, but also cap the width - max-width: min(calc(100% - 2 * 48px), 600px); + max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px); box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content min-content;