From 7398119e6113d95cf0560e7bafed77a0fd554786 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 5 Jul 2024 23:31:14 +1200
Subject: [PATCH] prevent loading previous from scrolling ui to top

---
 src/public/text-messages-embed.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/public/text-messages-embed.html b/src/public/text-messages-embed.html
index 9771d1a..80b1c26 100644
--- a/src/public/text-messages-embed.html
+++ b/src/public/text-messages-embed.html
@@ -33,8 +33,9 @@
         <button @click="loadPrevious" type="button" class="w-full bg-gray-200 p-2 border-b hover:bg-gray-300">Load Previous</button>
 
         <!-- messages -->
-        <div id="messages" class="h-full flex flex-col space-y-3 p-3 overflow-y-scroll">
-            <div :key="message.id" v-for="message of messages" class="flex flex-col max-w-xl items-start">
+        <!-- note: must use flex-col-reverse to prevent ui scrolling when adding older messages to ui -->
+        <div id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
+            <div :key="message.id" v-for="message of reversedMessages" class="flex flex-col max-w-xl items-start my-1.5">
 
                 <!-- sender -->
                 <div class="text-xs text-gray-500">{{ getNodeName(message.from) }}</div>
@@ -250,6 +251,10 @@
             },
         },
         computed: {
+            reversedMessages() {
+                // ensure a copy of the array is returned in reverse order
+                return this.messages.map((message) => message).reverse();
+            },
             oldestMessageId() {
 
                 if(this.messages.length > 0){