BugFix: SystemPromptPanel Max Height Correction

HAWK-Digital-Environments · Aug 7, 2024 · 9db4fd7 · 9db4fd7
1 parent 095ea1c
commit 9db4fd7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/private/pages/interface.php b/private/pages/interface.php
@@ -287,7 +287,7 @@
 
 						<p >
 							<span>&Prime;</span>
-							<span contenteditable="true" id="system-prompt"></span>
+							<span contenteditable="true" id="system-prompt" oninput="calculateSystemPromptMaxHeight()"></span>
 							<span>&rdquo;</span>
 						</p>
 					</div>

diff --git a/public/js/interface_functions.js b/public/js/interface_functions.js
@@ -173,4 +173,19 @@ function toggleSystemPromptEdit(){
     isEditing = !isEditing;
 }
 
+
+function calculateSystemPromptMaxHeight(){
+    const inputWrapper = document.querySelector('.input-wrapper');
+    const inputHeight = inputWrapper.getBoundingClientRect().height;
+
+    const spPanel = document.getElementById('system-prompt-panel');
+
+    const windowHeight = window.innerHeight;
+    const remInPixels = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const margin = 8 * remInPixels;
+
+    const maxHeight = windowHeight - inputHeight - margin;
+    spPanel.style.maxHeight = `${maxHeight}px`;
+}
+
 //#endregion
diff --git a/public/style/interface_style.css b/public/style/interface_style.css
@@ -754,11 +754,14 @@ details svg{
 }
 #system-prompt-panel{
   position: absolute;
-  bottom: 130%;
+  bottom: calc(100% + 2rem);
   left: 0;
   right: 0;
   margin-bottom: 1rem;
   height: max-content;
+  max-height: 70vh;
+  overflow-y: auto;
+
   padding: 0.5rem 2rem 1rem 2rem;
 
   /* font-size: 0.8rem; */
@@ -772,6 +775,26 @@ details svg{
   opacity: 0;
   transition: opacity 300ms;
 }
+#system-prompt-panel::-webkit-scrollbar {
+  width: 7px;
+}
+
+#system-prompt-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+
+#system-prompt-panel::-webkit-scrollbar-thumb {
+  background: #cbcbcb;
+  border-radius: 5px;
+}
+
+#system-prompt-panel::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+
+
+
 #system-prompt-title{
   display: grid;
   grid-template-columns: auto 1fr auto;