From 73442a2b6d0f2de333c26cbdde862f3f7b84d8a8 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Wed, 27 Aug 2025 05:43:13 -0700
Subject: [PATCH] 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.
---
 css/chat_style-messenger.css |  2 ++
 css/main.css                 |  4 ++++
 js/main.js                   | 27 +++++++++++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/css/chat_style-messenger.css b/css/chat_style-messenger.css
index 583703c0..70fd6d4a 100644
--- a/css/chat_style-messenger.css
+++ b/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;
 }
diff --git a/css/main.css b/css/main.css
index 062d3eb2..b799f595 100644
--- a/css/main.css
+++ b/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 {
diff --git a/js/main.js b/js/main.js
index 4b4b14c2..9b9d685a 100644
--- a/js/main.js
+++ b/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();
+})();