From e3e053ab995a2e9e69757a8df31a7452ef0f7557 Mon Sep 17 00:00:00 2001
From: Lounger <lounger83@gmail.com>
Date: Thu, 21 Dec 2023 03:42:23 +0100
Subject: [PATCH] UI: Expand chat vertically and handle header wrapping

---
 css/main.css | 14 +++-----------
 js/main.js   | 15 +++++++++------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/css/main.css b/css/main.css
index ffb4741f..d9afc8a9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -325,14 +325,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
         padding-left: 0;
         padding-right: 0;
     }
-
-    .chat-parent {
-        height: calc(100dvh - 179px) !important;
-    }
-
-    .old-ui .chat-parent {
-        height: calc(100dvh - 310px) !important;
-    }
 }
 
 .chat {
@@ -349,16 +341,16 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 }
 
 .chat-parent {
-    height: calc(100dvh - 181px);
+    height: calc(100dvh - 113px - var(--chat-input-offset));
     overflow: auto !important;
 }
 
 .old-ui .chat-parent {
-    height: calc(100dvh - 270px);
+    height: calc(100dvh - 207px - var(--chat-input-offset));
 }
 
 .chat-parent.bigchat {
-    height: calc(100dvh - 181px) !important;
+    height: calc(100dvh - 113px - var(--chat-input-offset)) !important;
 }
 
 .chat > .messages {
diff --git a/js/main.js b/js/main.js
index 62e78645..e3573d82 100644
--- a/js/main.js
+++ b/js/main.js
@@ -126,7 +126,7 @@ targetElement.addEventListener("scroll", function() {
 // Create a MutationObserver instance
 const observer = new MutationObserver(function(mutations) {
   mutations.forEach(function(mutation) {
-    updateChatHeight();
+    updateCssProperties();
 
     if(!isScrolled) {
       targetElement.scrollTop = targetElement.scrollHeight;
@@ -329,14 +329,17 @@ function toggleBigPicture() {
 }
 
 //------------------------------------------------
-// Define the --chat-height global CSS variable to
-// the height of the chat parent
+// Define global CSS properties for resizing and
+// positioning certain elements
 //------------------------------------------------
-function updateChatHeight() {
+function updateCssProperties() {
   const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
   const newChatHeight = `${chatContainer.clientHeight}px`;
-
   document.documentElement.style.setProperty('--chat-height', newChatHeight);
+
+  const header = document.querySelector('.header_bar');
+  const chatInputOffset = `${header.clientHeight}px`;
+  document.documentElement.style.setProperty('--chat-input-offset', chatInputOffset);
 }
 
-window.addEventListener('resize', updateChatHeight);
+window.addEventListener('resize', updateCssProperties);