- overflow handling for draggable sheld

public/scripts/RossAscends-mods.js

@@ -11,6 +11,7 @@ import {
     api_server_textgenerationwebui,
     is_send_press,
     getTokenCount,
+    max_context,
 
 } from "../script.js";
 
@@ -331,6 +332,12 @@ function dragElement(elmnt) {
     }
 
     function elementDrag(e) {
+        let winWidth = window.innerWidth;
+        let winHeight = window.innerHeight;
+        let draggableHeight = parseInt(getComputedStyle(elmnt).getPropertyValue('height').slice(0, -2));
+        let draggableWidth = parseInt(getComputedStyle(elmnt).getPropertyValue('width').slice(0, -2));
+        let draggableTop = parseInt(getComputedStyle(elmnt).getPropertyValue('top').slice(0, -2));
+        let draggableLeft = parseInt(getComputedStyle(elmnt).getPropertyValue('left').slice(0, -2));
         e = e || window.event;
         e.preventDefault();
         // calculate the new cursor position:
@@ -338,9 +345,21 @@ function dragElement(elmnt) {
         pos2 = pos4 - e.clientY;
         pos3 = e.clientX;
         pos4 = e.clientY;
+        let maxX = (draggableWidth + draggableLeft);
+        let maxY = (draggableHeight + draggableTop);
         // set the element's new position:
+
         elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
         elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+
+        //fix over/underflows:
+        if (elmnt.offsetTop - pos2 <= 42) { elmnt.style.top = "42px" } //42px barrier for TopBar
+        if (elmnt.offsetLeft - pos1 <= 0) { elmnt.style.left = "0px" }
+        if (maxX >= winWidth - 10) { elmnt.style.left = ((elmnt.offsetLeft - pos2) - 10 + "px") }
+        if (maxY >= winHeight - 10) { elmnt.style.top = ((elmnt.offsetTop - pos1) - 10 + "px") }
+
+        //console.log("left/top: " + (elmnt.offsetLeft - pos1) + "/" + (elmnt.offsetTop - pos2) + ", win: " + winWidth + "/" + winHeight + ", max X/Y: " + maxX + "/" + maxY);
+
     }
 
     function closeDragElement() {

public/style.css

@@ -211,6 +211,8 @@ code {
     /* margin: 0 auto; */
     z-index: 2;
     resize: both;
+    min-height: 100px;
+    min-width: 100px;
 }
 
 #sheldheader {