From 554a8f910b1182b3a2ab6b860f3cc0951065d687 Mon Sep 17 00:00:00 2001
From: Lounger <4087076+TheLounger@users.noreply.github.com>
Date: Fri, 22 Dec 2023 04:51:20 +0100
Subject: [PATCH] Attempt at shrinking chat area when input box grows

---
 css/main.css |  2 +-
 js/main.js   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/css/main.css b/css/main.css
index 6a61b7f8..405a522d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -332,7 +332,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     margin-left: auto;
     margin-right: auto;
     max-width: 880px;
-    min-height: var(--chat-height);
+    height: var(--chat-height);
     overflow-y: auto;
     padding-right: 15px;
     display: flex;
diff --git a/js/main.js b/js/main.js
index e3573d82..35fe99d5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -332,14 +332,28 @@ function toggleBigPicture() {
 // Define global CSS properties for resizing and
 // positioning certain elements
 //------------------------------------------------
+let currentChatInputHeight = 0;
+
 function updateCssProperties() {
+  // Set the height of the chat area
   const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
-  const newChatHeight = `${chatContainer.clientHeight}px`;
+  const chatInputHeight = document.querySelector('#chat-input textarea').clientHeight;
+  const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`;
   document.documentElement.style.setProperty('--chat-height', newChatHeight);
 
+  // Set the position offset of the chat input box
   const header = document.querySelector('.header_bar');
   const chatInputOffset = `${header.clientHeight}px`;
   document.documentElement.style.setProperty('--chat-input-offset', chatInputOffset);
+
+  // Offset the scroll position of the chat area
+  if (chatInputHeight !== currentChatInputHeight) {
+    chatContainer.scrollTop += chatInputHeight > currentChatInputHeight ? chatInputHeight : -chatInputHeight;
+    currentChatInputHeight = chatInputHeight;
+  }
 }
 
+new ResizeObserver(updateCssProperties)
+  .observe(document.querySelector('#chat-input textarea'));
+
 window.addEventListener('resize', updateCssProperties);