From 2018952151c272db1cfb708f5304e023b5f472f6 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 23:39:05 +0300
Subject: [PATCH] web/timeline: use grid instead of flex for individual events

---
 web/src/ui/timeline/TimelineEvent.css | 39 ++++++++++++++++-----------
 web/src/ui/timeline/TimelineEvent.tsx | 14 +++++-----
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index f558242..5bbab4e 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -2,14 +2,19 @@ div.timeline-event {
 	width: 100%;
 	max-width: 100%;
 	overflow: hidden;
-	display: flex;
-	gap: .5rem;
+	display: grid;
 	margin-top: .25rem;
+	grid-template:
+		"avatar gap sender" auto
+		"avatar gap content" auto
+		/ 40px .25rem 1fr;
 
 	> div.sender-avatar {
+		grid-area: avatar;
+
 		width: 40px;
 		height: 40px;
-		padding-top: 2px;
+		margin-top: 2px;
 
 		> img {
 			width: 100%;
@@ -19,22 +24,24 @@ div.timeline-event {
 		}
 	}
 
-	> div.sender-and-content {
-		flex: 1;
+	> div.event-sender-and-time {
+		grid-area: sender;
 
-		> div.event-sender-and-time {
-			display: flex;
-			align-items: center;
-			gap: .5rem;
+		display: flex;
+		align-items: center;
+		gap: .5rem;
 
-			span.event-sender {
-				font-weight: bold;
-			}
-
-			span.event-time {
-				font-size: .8rem;
-			}
+		span.event-sender {
+			font-weight: bold;
 		}
+
+		span.event-time {
+			font-size: .8rem;
+		}
+	}
+
+	> div.event-content {
+		grid-area: content;
 	}
 }
 
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index d1ac09f..02484b3 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -53,14 +53,12 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
 		<div className="sender-avatar">
 			<img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
 		</div>
-		<div className="sender-and-content">
-			<div className="event-sender-and-time">
-				<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
-				<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
-			</div>
-			<div className="event-content">
-				<BodyType room={room} event={evt}/>
-			</div>
+		<div className="event-sender-and-time">
+			<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
+			<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
+		</div>
+		<div className="event-content">
+			<BodyType room={room} event={evt}/>
 		</div>
 	</div>
 }