UI: Better handle the chat input position with CSS

This also solves scrolling issues with the main chat content
when the height of the textarea increases.

Author: oobabooga

css/chat_style-messenger.css

@@ -99,9 +99,11 @@
 .message-body p em {
     color: rgb(110 110 110) !important;
 }
+
 .editing-textarea {
     width: max(30rem) !important;
 }
+
 .circle-you + .text .edit-control-button, .circle-you + .text .editing-textarea {
     color: #000 !important;
 }

css/main.css

@@ -404,6 +404,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     flex: 1;
     overflow: auto !important;
     border-radius: 0 !important;
+    margin-bottom: 75px;
 }
 
 .chat-parent .prose {
@@ -626,6 +627,9 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     max-width: 54rem;
     left: 50%;
     transform: translateX(-50%);
+    position: absolute;
+    bottom: 0;
+    background: var(--body-background-fill);
 }
 
 @media print {

js/main.js

@@ -1065,3 +1065,30 @@ document.fonts.addEventListener("loadingdone", (event) => {
     }
   }, 50);
 });
+
+(function() {
+  const chatParent = document.querySelector(".chat-parent");
+  const chatInputRow = document.querySelector("#chat-input-row");
+  const originalMarginBottom = 75;
+  let originalHeight = chatInputRow.offsetHeight;
+
+  function updateMargin() {
+    const currentHeight = chatInputRow.offsetHeight;
+    const heightDifference = currentHeight - originalHeight;
+    chatParent.style.marginBottom = `${originalMarginBottom + heightDifference}px`;
+  }
+
+  // Watch for changes that might affect height
+  const observer = new MutationObserver(updateMargin);
+  observer.observe(chatInputRow, {
+    childList: true,
+    subtree: true,
+    attributes: true
+  });
+
+  // Also listen for window resize
+  window.addEventListener("resize", updateMargin);
+
+  // Initial call to set the margin based on current state
+  updateMargin();
+})();