From 3f0af3a5194b0a8d107955cad516c254bb9fab80 Mon Sep 17 00:00:00 2001
From: rainbownapkin <ourforest@tuta.io>
Date: Thu, 5 Dec 2024 04:46:57 -0500
Subject: [PATCH] Fixed userlist breaking the page layout

---
 www/js/channel/chat.js     |  7 ++++++-
 www/js/channel/userlist.js |  6 +++++-
 www/js/utils.js            | 19 +++++++++++++++----
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js
index fbe86df..0d9ba80 100644
--- a/www/js/channel/chat.js
+++ b/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";
diff --git a/www/js/channel/userlist.js b/www/js/channel/userlist.js
index f34a32b..83046ad 100644
--- a/www/js/channel/userlist.js
+++ b/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");
diff --git a/www/js/utils.js b/www/js/utils.js
index 98cd408..748bdbc 100644
--- a/www/js/utils.js
+++ b/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
-                    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;
+                    //call fixCutoff with standalone mode off, and a pre-calculated pageBreak
+                    this.fixCutoff(false, pageBreak);
                 }
             }
         }
@@ -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();
+                        }
+        }
     }
 }