Prevent input/chat area overlap with new --my-delta variable

This commit is contained in:
oobabooga 2023-12-25 14:07:31 -08:00
parent 02d063fb9f
commit 5466ae59a7
2 changed files with 7 additions and 3 deletions

View File

@ -342,17 +342,20 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
} }
.chat-parent { .chat-parent {
height: calc(100dvh - 98px - var(--chat-input-offset)); height: calc(100dvh - 98px - var(--chat-input-offset) - var(--my-delta));
overflow: auto !important; overflow: auto !important;
border-radius: 0 0 8px 8px !important; border-radius: 0 0 8px 8px !important;
margin-bottom: var(--my-delta) !important;
} }
.old-ui .chat-parent { .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 { .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 { .chat > .messages {

View File

@ -340,6 +340,7 @@ function updateCssProperties() {
const chatInputHeight = document.querySelector('#chat-input textarea').clientHeight; const chatInputHeight = document.querySelector('#chat-input textarea').clientHeight;
const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`; const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`;
document.documentElement.style.setProperty('--chat-height', newChatHeight); 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 // Set the position offset of the chat input box
const header = document.querySelector('.header_bar'); const header = document.querySelector('.header_bar');