From ac3438ad25b82a8ed00c273db8f2aedf8582b927 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Sun, 8 Dec 2024 00:53:49 -0700 Subject: [PATCH] timeline: make events go across entire width but with padding Signed-off-by: Sumner Evans Signed-off-by: Sumner Evans --- web/src/ui/timeline/TimelineEvent.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index ad729ac..6e3bfbc 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -1,8 +1,8 @@ div.timeline-event { - width: 100%; - max-width: 100%; + width: calc(100% - 2 * 1.6rem); + max-width: calc(100% - 2 * 1.6rem); + padding: calc(var(--timeline-message-gap)/2) 1.6rem; display: grid; - margin-top: var(--timeline-message-gap); grid-template: "cmc cmc cmc cmc" 0 "avatar gap sender sender" auto @@ -120,7 +120,7 @@ div.timeline-event { "cmc cmc cmc" 0 "timestamp content status" auto / var(--timeline-avatar-total-size) 1fr 2rem; - margin-top: var(--timeline-message-gap-same-sender); + padding-top: calc(var(--timeline-message-gap-same-sender)/2); > div.sender-avatar, > div.event-sender-and-time { display: none; @@ -209,6 +209,7 @@ div.date-separator { display: flex; align-items: center; gap: .5rem; + padding: calc(var(--timeline-message-gap)/2) 0; > hr { flex: 1;