From 5466ae59a7bbac80a2234d5c069166e9612b1ca0 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Mon, 25 Dec 2023 14:07:31 -0800
Subject: [PATCH] Prevent input/chat area overlap with new --my-delta variable

---
 css/main.css | 9 ++++++---
 js/main.js   | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/css/main.css b/css/main.css
index 937c1052..d916db44 100644
--- a/css/main.css
+++ b/css/main.css
@@ -342,17 +342,20 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 }
 
 .chat-parent {
-    height: calc(100dvh - 98px - var(--chat-input-offset));
+    height: calc(100dvh - 98px - var(--chat-input-offset) - var(--my-delta));
     overflow: auto !important;
     border-radius: 0 0 8px 8px !important;
+    margin-bottom: var(--my-delta) !important;
 }
 
 .old-ui .chat-parent {
-    height: calc(100dvh - 192px - var(--chat-input-offset));
+    height: calc(100dvh - 192px - var(--chat-input-offset) - var(--my-delta));
+    margin-bottom: var(--my-delta) !important;
 }
 
 .chat-parent.bigchat {
-    height: calc(100dvh - 98px - var(--chat-input-offset)) !important;
+    height: calc(100dvh - 98px - var(--chat-input-offset) - var(--my-delta)) !important;
+    margin-bottom: var(--my-delta) !important;
 }
 
 .chat > .messages {
diff --git a/js/main.js b/js/main.js
index 35fe99d5..34064774 100644
--- a/js/main.js
+++ b/js/main.js
@@ -340,6 +340,7 @@ function updateCssProperties() {
   const chatInputHeight = document.querySelector('#chat-input textarea').clientHeight;
   const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`;
   document.documentElement.style.setProperty('--chat-height', newChatHeight);
+  document.documentElement.style.setProperty('--my-delta', `${chatInputHeight - 40}px`);
 
   // Set the position offset of the chat input box
   const header = document.querySelector('.header_bar');