Fixed userlist breaking the page layout

www/js/channel/chat.js

@@ -196,14 +196,19 @@ class chatBox{
             //Fix busted layout
             var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
             this.chatPanel.style.width = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
+            //This sometimes gets called before userList ahs been initiated :p
+            if(this.client.userList != null){
+                this.client.userList.clickDragger.fixCutoff();
+            }
         }
     } 
 
-    toggleUI(show = this.chatPanel.style.display == "none"){
+    toggleUI(show = !this.chatPanel.checkVisibility()){
         if(show){
             this.chatPanel.style.display = "flex";
             this.showChatIcon.style.display = "none";
             this.client.player.hideVideoIcon.style.display = "flex";
+            this.client.userList.clickDragger.fixCutoff();
         }else{
             this.chatPanel.style.display = "none";
             this.showChatIcon.style.display = "flex";

www/js/channel/userlist.js

@@ -86,6 +86,9 @@ class userList{
         });
 
         this.colorMap = newMap;
+
+        //Make sure we're not cutting the ux off
+        this.clickDragger.fixCutoff();
     }
 
     renderUser(user, flair){
@@ -118,10 +121,11 @@ class userList{
         this.userList.appendChild(userSpan);
     }
 
-    toggleUI(show = this.userDiv.style.display == "none"){
+    toggleUI(show = !this.userDiv.checkVisibility()){
         if(show){
             this.userDiv.style.display = "flex";
             this.toggleIcon.classList.replace("bi-caret-left-fill","bi-caret-down-fill");
+            this.clickDragger.fixCutoff();
         }else{
             this.userDiv.style.display = "none";
             this.toggleIcon.classList.replace("bi-caret-down-fill","bi-caret-left-fill");

www/js/utils.js

@@ -222,10 +222,8 @@ class canopyUXUtils{
                     //If we let go here, the width isn't breaking anything so there's nothing to fix.
                     this.fixWidth = false;
                 }else{
-                    //We need to move the element back, but we can't do it all the way while we're still dragging as it will thrash
+                    //call fixCutoff with standalone mode off, and a pre-calculated pageBreak
-                    this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak - 1)}vw`;
+                    this.fixCutoff(false, pageBreak);
-                    //If we stop dragging here, let the endDrag function know to fix the pixel difference used to prevent thrashing
-                    this.fixWidth = true;
                 }
             }
         }
@@ -234,6 +232,19 @@ class canopyUXUtils{
             return (px / window.innerWidth) * 100;
         }
 
+
+        fixCutoff(standalone = true, pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width){
+                        //We need to move the element back, but we can't do it all the way while we're still dragging as it will thrash
+                        this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak - 1)}vw`;
+                        //If we stop dragging here, let the endDrag function know to fix the pixel difference used to prevent thrashing
+                        this.fixWidth = true;
+
+                        //If we're calling this outside of drag()
+                        if(standalone){
+                            //call end drag to finish the job
+                            this.endDrag();
+                        }
+        }
     }
 }