From d85eb03ad0abe5742b5aab5408bc48252b4bf1ca Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 16:18:13 +0200
Subject: [PATCH] feat: change message history grids to fix scaling of message
 timestamps

---
 components/Message.vue     | 10 +++++-----
 components/MessageArea.vue |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 5db6ec3..e488adc 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
+	<div v-else ref="messageElement" class="message grouped-message" tabindex="0">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
@@ -24,7 +24,7 @@
 				</span>
 			</div>
 		</div>
-		<div class="message-data">
+		<div class="message-data" :id="props.last ? 'last-message' : undefined">
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
@@ -100,8 +100,7 @@ onMounted(async () => {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	display: grid;
-	grid-template-columns: 1fr 19fr;
+	display: contents;
 	align-items: center;
 }
 
@@ -110,7 +109,7 @@ onMounted(async () => {
 }
 
 #last-message {
-	margin-bottom: 2dvh;
+	margin-bottom: 1dvh;
 }
 
 .message-metadata {
@@ -143,6 +142,7 @@ onMounted(async () => {
 	min-width: 4dvw;
 	text-align: center;
 	align-content: center;
+	white-space: nowrap;
 }
 
 .author-username {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index e3dcdbf..e142641 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -245,8 +245,8 @@ onMounted(async () => {
 
 #messages {
 	overflow-y: scroll;
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: min-content 1fr;
 	gap: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;