Improved chat scrolling (#3601)

css/main.css

@@ -253,6 +253,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     .bigchat #chat {
         height: calc(100dvh - 180px) !important;
     }
+
+    .chat {
+        flex-direction: column-reverse !important;
+    }
 }
 
 .chat {
@@ -263,10 +267,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     overflow-y: auto;
     padding-right: 20px;
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
     word-break: break-word;
     overflow-wrap: anywhere;
-    padding-top: 1px;
+    padding-top: 6px;
 }
 
 #chat {

js/main.js

@@ -48,3 +48,26 @@ document.addEventListener("keydown", function(event) {
     }
   }
 });
+
+// Chat scrolling
+const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode;
+
+// Create a MutationObserver instance
+const observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    let childElement = targetElement.childNodes[2].childNodes[0].childNodes[1];
+    childElement.scrollTop = childElement.scrollHeight;
+  });
+});
+
+// Configure the observer to watch for changes in the subtree and attributes
+const config = {
+  childList: true,
+  subtree: true,
+  characterData: true,
+  attributeOldValue: true,
+  characterDataOldValue: true
+};
+
+// Start observing the target element
+observer.observe(targetElement, config);