From 878e2a037f87e4c32311c0c164e334c19655a44e Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 26 Jul 2024 16:18:53 +0200
Subject: [PATCH] fix(MessageList): center date separator with grid layout and
 hidden timestamp

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 26 ++++++++++++++------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 2a61955e2be..da43de64b2a 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -26,6 +26,7 @@
 				<span class="messages-group__date-text" role="heading" aria-level="3">
 					{{ dateSeparatorLabels[dateTimestamp] }}
 				</span>
+				<span class="messages-group__date-hidden">{{ getHiddenTime(dateTimestamp) }}</span>
 			</li>
 			<component :is="messagesGroupComponent(group)"
 				v-for="group in list"
@@ -1228,7 +1229,11 @@ export default {
 		onMessageHeightChanged({ heightDiff }) {
 			// scroll down by the height difference
 			this.$refs.scroller.scrollTop += heightDiff
-		}
+		},
+
+		getHiddenTime(timestamp) {
+			return moment(timestamp * 1000).format('LT')
+		},
 	},
 }
 </script>
@@ -1277,23 +1282,30 @@ export default {
 	&__date {
 		position: sticky;
 		top: 0;
-		display: flex;
-		justify-content: center;
+		display: grid;
+		grid-template-columns: minmax(0, $messages-text-max-width) 1fr;
 		z-index: 2;
+		margin-left: $message-avatar-column-width;
 		margin-bottom: 5px;
 		pointer-events: none;
 	}
 
 	&__date-text {
-		margin-right: calc(var(--default-clickable-area) * 2);
-		content: attr(data-date);
-		padding: 4px 12px;
-		left: 50%;
+		margin: 0 auto;
+		padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
+		text-wrap: nowrap;
 		color: var(--color-text-maxcontrast);
 		background-color: var(--color-background-dark);
 		border-radius: var(--border-radius-pill);
 	}
 
+	&__date-hidden {
+		width: max-content;
+		pointer-events: none;
+		opacity: 0;
+		margin-right: $message-status-icon-width;
+	}
+
 	&:last-child {
 		margin-bottom: 16px;
 	}