From dd6c7b48225ea23a3049104adb8a7acbf41262d3 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 01:05:11 +0300
Subject: [PATCH] web/timeline: align messages to bottom when the screen isn't
 full

---
 web/src/ui/timeline/TimelineView.css |  4 ++++
 web/src/ui/timeline/TimelineView.tsx | 14 +++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/src/ui/timeline/TimelineView.css b/web/src/ui/timeline/TimelineView.css
index 99d6da3..d676b18 100644
--- a/web/src/ui/timeline/TimelineView.css
+++ b/web/src/ui/timeline/TimelineView.css
@@ -1,4 +1,8 @@
 div.timeline-view {
 	padding: 1rem;
 	overflow-y: scroll;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
diff --git a/web/src/ui/timeline/TimelineView.tsx b/web/src/ui/timeline/TimelineView.tsx
index bb45b80..b17ee19 100644
--- a/web/src/ui/timeline/TimelineView.tsx
+++ b/web/src/ui/timeline/TimelineView.tsx
@@ -62,11 +62,15 @@ const TimelineView = ({ room }: TimelineViewProps) => {
 	}, [timeline])
 
 	return <div className="timeline-view" onScroll={handleScroll} ref={timelineViewRef}>
-		<button onClick={loadHistory}>Load history</button>
-		{timeline.map(entry => <TimelineEvent
-			key={entry.event_rowid} room={room} eventRowID={entry.event_rowid}
-		/>)}
-		<div ref={bottomRef}/>
+		<div className="timeline-beginning">
+			<button onClick={loadHistory}>Load history</button>
+		</div>
+		<div className="timeline-list">
+			{timeline.map(entry => <TimelineEvent
+				key={entry.event_rowid} room={room} eventRowID={entry.event_rowid}
+			/>)}
+			<div className="timeline-bottom-ref" ref={bottomRef}/>
+		</div>
 	</div>
 }