unlimited zoomed avatars + movingUI rewrite

public/index.html

@@ -3394,10 +3394,13 @@
         <div class="export_format list-group-item" data-format="webp">WEBP</div>
     </div>
 
-    <div id="avatar_zoom_popup">
+    <div id="zoomed_avatar_template" class="template_element">
-        <div id="avatar_zoom_popupheader" class="fa-solid fa-grip drag-grabber"></div>
+        <div class="zoomed_avatar">
-        <img id="zoomed_avatar" src="">
+            <div id="" class="fa-solid fa-grip drag-grabber"></div>
+            <img class="zoomed_avatar_img" src="">
+        </div>
     </div>
+
     <div id="rawPromptPopup" class="list-group">
         <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
     </div>
@@ -3446,4 +3449,4 @@
     </script>
 </body>
 
-</html>
+</html>

public/script.js

@@ -1,4 +1,4 @@
-import { humanizedDateTime, favsToHotswap, getMessageTimeStamp } from "./scripts/RossAscends-mods.js";
+import { humanizedDateTime, favsToHotswap, getMessageTimeStamp, dragElement, isMobile } from "./scripts/RossAscends-mods.js";
 import { encode } from "../scripts/gpt-2-3-tokenizer/mod.js";
 import { GPT3BrowserTokenizer } from "../scripts/gpt-3-tokenizer/gpt3-tokenizer.js";
 import {
@@ -72,6 +72,7 @@ import {
     formatInstructStoryString,
     formatInstructModePrompt,
     persona_description_positions,
+    loadMovingUIState,
 } from "./scripts/power-user.js";
 
 import {
@@ -1013,6 +1014,10 @@ function clearChat() {
     count_view_mes = 0;
     extension_prompts = {};
     $("#chat").children().remove();
+    if ($('.zoomed_avatar[forChar]').length) {
+        console.debug('saw avatars to remove')
+        $('.zoomed_avatar[forChar]').remove();
+    } else { console.debug('saw no avatars') }
     itemizedPrompts = [];
 }
 
@@ -4409,7 +4414,7 @@ function lockUserNameToChat() {
             { timeOut: 10000, extendedTimeOut: 20000, },
         );
         power_user.personas[user_avatar] = name1;
-        power_user.persona_descriptions[user_avatar] =  { description: '', position: persona_description_positions.BEFORE_CHAR };
+        power_user.persona_descriptions[user_avatar] = { description: '', position: persona_description_positions.BEFORE_CHAR };
     }
 
     chat_metadata['persona'] = user_avatar;
@@ -6351,7 +6356,8 @@ $(document).ready(function () {
     });
     $(document).click(event => {
         if ($(':focus').attr('id') !== 'send_textarea') {
-            if (!$(event.target.id).is("#options_button, #send_but, #send_textarea, #option_regenerate")) {
+            var validIDs = ["options_button", "send_but", "send_textarea", "option_regenerate"];
+            if ($(event.target).attr('id') !== validIDs) {
                 S_TAFocused = false;
                 S_TAPreviouslyFocused = false;
             }
@@ -6762,13 +6768,13 @@ $(document).ready(function () {
     $("#form_create").submit(createOrEditCharacter);
 
     $("#delete_button").on('click', function () {
-            popup_type = "del_ch";
+        popup_type = "del_ch";
-            callPopup(`
+        callPopup(`
                 <h3>Delete the character?</h3>
                 <b>THIS IS PERMANENT!<br><br>
                 THIS WILL ALSO DELETE ALL<br>
                 OF THE CHARACTER'S CHAT FILES.<br><br></b>`
-            );
+        );
     });
 
     $("#rm_info_button").on('click', function () {
@@ -7548,8 +7554,8 @@ $(document).ready(function () {
         }
     });
     $("#export_button").on('click', function (e) {
-            $('#export_format_popup').toggle();
+        $('#export_format_popup').toggle();
-            exportPopper.update();
+        exportPopper.update();
     });
     $(document).on('click', '.export_format', async function () {
         const format = $(this).data('format');
@@ -7634,16 +7640,16 @@ $(document).ready(function () {
 
     $("#dupe_button").click(async function () {
 
-            const body = { avatar_url: characters[this_chid].avatar };
+        const body = { avatar_url: characters[this_chid].avatar };
-            const response = await fetch('/dupecharacter', {
+        const response = await fetch('/dupecharacter', {
-                method: 'POST',
+            method: 'POST',
-                headers: getRequestHeaders(),
+            headers: getRequestHeaders(),
-                body: JSON.stringify(body),
+            body: JSON.stringify(body),
-            });
+        });
-            if (response.ok) {
+        if (response.ok) {
-                toastr.success("Character Duplicated");
+            toastr.success("Character Duplicated");
-                getCharacters();
+            getCharacters();
-            }
+        }
     });
 
     $(document).on("click", ".select_chat_block, .bookmark_link, .mes_bookmark", async function () {
@@ -7682,12 +7688,15 @@ $(document).ready(function () {
     $('.drawer-toggle').click(function () {
         var icon = $(this).find('.drawer-icon');
         var drawer = $(this).parent().find('.drawer-content');
+        if (drawer.hasClass('resizing')) { return }
         var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
         let targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
         const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
 
-        if (!drawerWasOpenAlready) {
+        if (!drawerWasOpenAlready) { //to open the drawer
-            $('.openDrawer').not('.pinnedOpen').slideToggle(200, "swing");
+            $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", function () {
+                $(this).closest('.drawer-content').removeClass('resizing');
+            });
             $('.openIcon').toggleClass('closedIcon openIcon');
             $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
             icon.toggleClass('openIcon closedIcon');
@@ -7695,29 +7704,36 @@ $(document).ready(function () {
 
             //console.log(targetDrawerID);
             if (targetDrawerID === 'right-nav-panel') {
-                $(this).closest('.drawer').find('.drawer-content').slideToggle({
+                $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle({
                     duration: 200,
                     easing: "swing",
                     start: function () {
                         jQuery(this).css('display', 'flex');
                     },
                     complete: function () {
+                        $(this).closest('.drawer-content').removeClass('resizing');
                         $("#rm_print_characters_block").trigger("scroll");
                     }
                 })
             } else {
-                $(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing");
+                $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle(200, "swing", function () {
+                    $(this).closest('.drawer-content').removeClass('resizing');
+                });
             }
 
 
-        } else if (drawerWasOpenAlready) {
+        } else if (drawerWasOpenAlready) { //to close
             icon.toggleClass('closedIcon openIcon');
 
             if (pinnedDrawerClicked) {
-                $(drawer).slideToggle(200, "swing");
+                $(drawer).addClass('resizing').slideToggle(200, "swing", function () {
+                    $(this).removeClass('resizing');
+                });
             }
             else {
-                $('.openDrawer').not('.pinnedOpen').slideToggle(200, "swing");
+                $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", function () {
+                    $(this).closest('.drawer-content').removeClass('resizing');
+                });
             }
 
             drawer.toggleClass('closedDrawer openDrawer');
@@ -7772,22 +7788,44 @@ $(document).ready(function () {
     });
 
     $(document).on('click', '.mes .avatar', function () {
+
+        console.log(isMobile());
+        console.log($('body').hasClass('waifuMode'));
+
+        if (isMobile() === true && !$('body').hasClass('waifuMode')) {
+            console.debug('saw mobile regular mode, returning');
+            return;
+        } else { console.debug('saw valid env for zoomed display') }
+
         let thumbURL = $(this).children('img').attr('src');
         let charsPath = '/characters/'
         let targetAvatarImg = thumbURL.substring(thumbURL.lastIndexOf("=") + 1);
+        let charname = targetAvatarImg.replace('.png', '');
 
         let avatarSrc = isDataURL(thumbURL) ? thumbURL : charsPath + targetAvatarImg;
-        console.log(avatarSrc);
+        if ($(`.zoomed_avatar[forChar="${charname}"]`).length) {
-        if ($(this).parent().parent().attr('is_user') == 'true') { //handle user avatars
+            console.debug('removing container as it already existed')
-            $("#zoomed_avatar").attr('src', thumbURL);
+            $(`.zoomed_avatar[forChar="${charname}"]`).remove();
-        } else if ($(this).parent().parent().attr('is_system') == 'true') { //handle system avatars
+        } else {
-            $("#zoomed_avatar").attr('src', thumbURL);
+            console.debug('making new container from template')
-        } else if ($(this).parent().parent().attr('is_user') == 'false') { //handle char avatars
+            const template = $('#zoomed_avatar_template').html();
-            $("#zoomed_avatar").attr('src', avatarSrc);
+            const newElement = $(template);
-        }
+            newElement.attr('forChar', charname);
-        $('#avatar_zoom_popup').toggle();
+            newElement.attr('id', `zoomFor_${charname}`);
+            newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`);
 
-        //} else { return; }
+            $('body').append(newElement);
+            if ($(this).parent().parent().attr('is_user') == 'true') { //handle user avatars
+                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
+            } else if ($(this).parent().parent().attr('is_system') == 'true') { //handle system avatars
+                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
+            } else if ($(this).parent().parent().attr('is_user') == 'false') { //handle char avatars
+                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', avatarSrc);
+            }
+            loadMovingUIState();
+            $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'block');
+            dragElement(newElement)
+        }
     });
 
     $(document).on('click', '#OpenAllWIEntries', function () {

public/scripts/RossAscends-mods.js

@@ -473,63 +473,97 @@ function OpenNavPanels() {
 
 
 // Make the DIV element draggable:
-dragElement(document.getElementById("sheld"));
+
-dragElement(document.getElementById("left-nav-panel"));
+
-dragElement(document.getElementById("right-nav-panel"));
+// SECOND UPDATE AIMING FOR MUTATIONS ONLY
-dragElement(document.getElementById("avatar_zoom_popup"));
-dragElement(document.getElementById("WorldInfo"));
 
 export function dragElement(elmnt) {
-
     var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    var draggableHeight, draggableWidth, draggableTop, draggableLeft;
+    var height, width, top, left;
-    var elmntName = $(elmnt).attr('id');
+    var elmntName = elmnt.attr('id');
-
+    const elmntNameEscaped = $.escapeSelector(elmntName);
-    if (document.getElementById(elmnt.id + "header")) { //ex: id="sheldheader"
+    const elmntHeader = $(`#${elmntNameEscaped}header`);
-        // if present, the header is where you move the DIV from, but this overrides everything else:
+    if (elmntHeader.length) {
-        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+        elmntHeader.off('mousedown').on('mousedown', (e) => {
+            dragMouseDown(e);
+        });
     } else {
-        // otherwise, move the DIV from anywhere inside the DIV, b:
+        elmnt.off('mousedown').on('mousedown', dragMouseDown);
-        elmnt.onmousedown = dragMouseDown;
     }
 
+    const observer = new MutationObserver((mutations) => {
+        const target = mutations[0].target;
+        if (!$(target).is(':visible')
+            || $(target).hasClass('resizing')
+            || Number((String(target.height).replace('px', ''))) < 50
+            || Number((String(target.width).replace('px', ''))) < 50
+            || isMobile() === true
+        ) { return }
+
+        const style = getComputedStyle(target);
+        console.log(style.top, style.left)
+        height = target.offsetHeight;
+        width = target.offsetWidth;
+        top = parseInt(style.top);
+        left = parseInt(style.left);
+
+        /*         console.log(`
+                        height=${height}, 
+                        width=${width}, 
+                        top=${top}, 
+                        left=${left}`); */
+
+        if (!power_user.movingUIState[elmntName]) {
+            power_user.movingUIState[elmntName] = {};
+        }
+
+        power_user.movingUIState[elmntName].top = top;
+        power_user.movingUIState[elmntName].left = left;
+        power_user.movingUIState[elmntName].width = width;
+        power_user.movingUIState[elmntName].height = height;
+        power_user.movingUIState[elmntName].right = 'unset';
+        power_user.movingUIState[elmntName].bottom = 'unset';
+        power_user.movingUIState[elmntName].margin = 'unset';
+        saveSettingsDebounced();
+        saveSettingsDebounced();
+
+
+        // Check if the element header exists and set the listener on the grabber
+        if (elmntHeader.length) {
+            elmntHeader.off('mousedown').on('mousedown', (e) => {
+                dragMouseDown(e);
+            });
+        } else {
+            elmnt.off('mousedown').on('mousedown', dragMouseDown);
+        }
+    });
+
+    observer.observe(elmnt.get(0), { attributes: true, attributeFilter: ['style'] });
+
     function dragMouseDown(e) {
-        //console.log(e);
+        if (e) {
-        e = e || window.event;
+            e.preventDefault();
-        e.preventDefault();
+            pos3 = e.clientX; //mouse X at click
-        // get the mouse cursor position at startup:
+            pos4 = e.clientY; //mouse Y at click
-        pos3 = e.clientX; //mouse X at click
+        }
-        pos4 = e.clientY; //mouse Y at click
+        $(document).on('mouseup', closeDragElement);
-        document.onmouseup = closeDragElement;
+        $(document).on('mousemove', elementDrag);
-        // call a function whenever the cursor moves:
-        document.onmousemove = elementDrag;
     }
 
     function elementDrag(e) {
-        //disable scrollbars when dragging to prevent jitter
         $("body").css("overflow", "hidden");
         if (!power_user.movingUIState[elmntName]) {
             power_user.movingUIState[elmntName] = {};
         }
 
-        //get window size
         let winWidth = window.innerWidth;
         let winHeight = window.innerHeight;
-
+        let sheldWidth = parseInt($('html').css('--sheldWidth').slice(0, -2));
-        //get necessary data for calculating element footprint
-        draggableHeight = parseInt(getComputedStyle(elmnt).getPropertyValue('height').slice(0, -2));
-        draggableWidth = parseInt(getComputedStyle(elmnt).getPropertyValue('width').slice(0, -2));
-        draggableTop = parseInt(getComputedStyle(elmnt).getPropertyValue('top').slice(0, -2));
-        draggableLeft = parseInt(getComputedStyle(elmnt).getPropertyValue('left').slice(0, -2));
-        let sheldWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sheldWidth').slice(0, -2));
         let topBarFirstX = (winWidth - sheldWidth) / 2;
         let topBarLastX = topBarFirstX + sheldWidth;
+        let maxX = (width + left);
+        let maxY = (height + top);
 
-        //set the lowest and most-right pixel the element touches
-        let maxX = (draggableWidth + draggableLeft);
-        let maxY = (draggableHeight + draggableTop);
-
-        // calculate the new cursor position:
         e = e || window.event;
         e.preventDefault();
 
@@ -538,97 +572,55 @@ export function dragElement(elmnt) {
         pos3 = e.clientX;   //new mouse X
         pos4 = e.clientY;   //new mouse Y
 
-        elmnt.setAttribute('data-dragged', 'true');
+        elmnt.attr('data-dragged', 'true');
 
-        //fix over/underflows:
+        if (elmnt.offset().top < 40) {
-
+            if (maxX > topBarFirstX && maxX < topBarLastX) {
-        setTimeout(function () {
+                elmnt.css('top', '42px');
-            if (elmnt.offsetTop < 40) {
-                /* console.log('6'); */
-                if (maxX > topBarFirstX && maxX < topBarLastX) {
-                    /* console.log('maxX inside topBar!'); */
-                    elmnt.style.top = "42px";
-                }
-                if (elmnt.offsetLeft < topBarLastX && elmnt.offsetLeft > topBarFirstX) {
-                    /* console.log('offsetLeft inside TopBar!'); */
-                    elmnt.style.top = "42px";
-                }
             }
-
+            if (elmnt.offset().left < topBarLastX && elmnt.offset().left > topBarFirstX) {
-            if (elmnt.offsetTop - pos2 <= 0) {
+                elmnt.css('top', '42px');
-                /* console.log('1'); */
-                //prevent going out of window top + 42px barrier for TopBar (can hide grabber)
-                elmnt.style.top = "0px";
             }
-
+        }
-            if (elmnt.offsetLeft - pos1 <= 0) {
+        if (elmnt.offset().top - pos2 <= 0) {
-                /* console.log('2'); */
+            elmnt.css('top', '0px');
-                //prevent moving out of window left
+        }
-                elmnt.style.left = "0px";
+        if (elmnt.offset().left - pos1 <= 0) {
+            elmnt.css('left', '0px');
+        }
+        if (maxX >= winWidth) {
+            elmnt.css('left', elmnt.offset().left - 10 + "px");
+        }
+        if (maxY >= winHeight) {
+            elmnt.css('top', elmnt.offset().top - 10 + "px");
+            if (elmnt.offset().top - pos2 <= 40) {
+                elmnt.css('top', '20px');
             }
+        }
+        elmnt.css('left', (elmnt.offset().left - pos1) + "px");
+        elmnt.css("top", (elmnt.offset().top - pos2) + "px");
+        elmnt.css('margin', 'unset');
 
-            if (maxX >= winWidth) {
+        /*
-                /* console.log('3'); */
+        console.log(`
-                //bounce off right
+            winWidth: ${winWidth}, winHeight: ${winHeight}
-                elmnt.style.left = elmnt.offsetLeft - 10 + "px";
+            sheldWidth: ${sheldWidth}
-            }
+            X: ${$(elmnt).css('left')}
-
+            Y: ${$(elmnt).css('top')}
-            if (maxY >= winHeight) {
+            MaxX: ${maxX}, MaxY: ${maxY}
-                /* console.log('4'); */
+            Topbar 1st X: ${((winWidth - sheldWidth) / 2)}
-                //bounce off bottom
+            TopBar lastX: ${((winWidth - sheldWidth) / 2) + sheldWidth}
-                elmnt.style.top = elmnt.offsetTop - 10 + "px";
+            `);
-                if (elmnt.offsetTop - pos2 <= 40) {
+        */
-                    /* console.log('5'); */
-                    //prevent going out of window top + 42px barrier for TopBar (can hide grabber)
-                    /* console.log('caught Y bounce to <40Y top'); */
-                    elmnt.style.top = "20px";
-                }
-            }
-            // if no problems, set element's new position
-            /* console.log('7'); */
-
-            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
-            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-            $(elmnt).css("bottom", "unset");
-            $(elmnt).css("right", "unset");
-            $(elmnt).css("margin", "unset");
-
-            /*             console.log(`
-                                        offsetLeft: ${elmnt.offsetLeft}, offsetTop: ${elmnt.offsetTop}
-                                        winWidth: ${winWidth}, winHeight: ${winHeight}
-                                        sheldWidth: ${sheldWidth}
-                                        X: ${elmnt.style.left}
-                                        Y: ${elmnt.style.top}
-                                        MaxX: ${maxX}, MaxY: ${maxY}
-                                        Topbar 1st X: ${((winWidth - sheldWidth) / 2)}
-                                        TopBar lastX: ${((winWidth - sheldWidth) / 2) + sheldWidth}
-                                            `); */
-
-
-
-        }, 50)
-
-        /* console.log("left/top: " + (elmnt.offsetLeft - pos1) + "/" + (elmnt.offsetTop - pos2) +
-            ", win: " + winWidth + "/" + winHeight +
-            ", max X / Y: " + maxX + " / " + maxY); */
-
     }
 
     function closeDragElement() {
-        // stop moving when mouse button is released:
+        $(document).off('mouseup', closeDragElement);
-        document.onmouseup = null;
+        $(document).off('mousemove', elementDrag);
-        document.onmousemove = null;
+        $("body").css("overflow", "");
-        //revert scrolling to normal after drag to allow recovery of vastly misplaced elements
+        // Clear the "data-dragged" attribute
-        $("body").css("overflow", "auto");
+        elmnt.attr('data-dragged', 'false');
-        saveMovingUIState();
-    }
 
-    function saveMovingUIState() {
-        power_user.movingUIState[elmntName].top = draggableTop;
-        power_user.movingUIState[elmntName].left = draggableLeft;
-        power_user.movingUIState[elmntName].width = draggableWidth;
-        power_user.movingUIState[elmntName].height = draggableHeight;
-        saveSettingsDebounced();
     }
 }
 
@@ -637,7 +629,22 @@ export function dragElement(elmnt) {
 $("document").ready(function () {
 
     // initial status check
-    setTimeout(RA_checkOnlineStatus, 100);
+    setTimeout(() => {
+
+        dragElement($("#sheld"));
+        dragElement($("#left-nav-panel"));
+        dragElement($("#right-nav-panel"));
+        dragElement($("#WorldInfo"));
+        dragElement($("#floatingPrompt"));
+
+        RA_checkOnlineStatus
+    }
+        , 100);
+
+
+
+
+    //$('div').on('resize', saveMovingUIState());
 
     // read the state of AutoConnect and AutoLoadChat.
     $(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled"));

public/scripts/power-user.js

@@ -15,7 +15,7 @@ import {
     name1,
     name2,
 } from "../script.js";
-import { favsToHotswap } from "./RossAscends-mods.js";
+import { favsToHotswap, isMobile } from "./RossAscends-mods.js";
 import {
     groups,
     selected_group,
@@ -25,6 +25,7 @@ import { registerSlashCommand } from "./slash-commands.js";
 
 export {
     loadPowerUserSettings,
+    loadMovingUIState,
     collapseNewlines,
     playMessageSound,
     sortGroupMembers,
@@ -289,9 +290,15 @@ function toggleWaifu() {
 }
 
 function switchWaifuMode() {
-    //console.log(`switching waifu to ${power_user.waifuMode}`);
     $("body").toggleClass("waifuMode", power_user.waifuMode);
     $("#waifuMode").prop("checked", power_user.waifuMode);
+    if (isMobile() && !$('body').hasClass('waifuMode')) {
+        console.debug('saw mobile regular mode, removing ZoomedAvatars');
+        if ($('.zoomed_avatar[forChar]').length) {
+            $('.zoomed_avatar[forChar]').remove();
+        }
+        return;
+    }
     scrollChatToBottom();
 }
 
@@ -633,15 +640,24 @@ function loadPowerUserSettings(settings, data) {
     switchWaifuMode();
     loadMovingUIState();
 
-    console.log(power_user)
+    //console.log(power_user)
 }
 
 function loadMovingUIState() {
     if (power_user.movingUIState) {
         for (var elmntName of Object.keys(power_user.movingUIState)) {
             var elmntState = power_user.movingUIState[elmntName];
-            var elmnt = $('#' + elmntName);
+            try {
-            elmnt.css(elmntState);
+                var elmnt = $('#' + $.escapeSelector(elmntName));
+                if (elmnt.length) {
+                    console.debug(`loading state for ${elmntName}`)
+                    elmnt.css(elmntState);
+                } else {
+                    console.debug(`skipping ${elmntName} because it doesn't exist in the DOM`)
+                }
+            } catch (err) {
+                console.debug(`error occurred while processing ${elmntName}: ${err}`)
+            }
         }
     }
 }
@@ -926,13 +942,16 @@ function resetMovablePanels() {
         document.getElementById("expression-holder").style.margin = '';
     }
 
-    document.getElementById("avatar_zoom_popup").style.top = '';
+    if ($(".zoomed_avatar")) {
-    document.getElementById("avatar_zoom_popup").style.left = '';
+        $(".zoomed_avatar").css('top', '');
-    document.getElementById("avatar_zoom_popup").style.right = '';
+        $(".zoomed_avatar").css('left', '');
-    document.getElementById("avatar_zoom_popup").style.bottom = '';
+        $(".zoomed_avatar").css('right', '');
-    document.getElementById("avatar_zoom_popup").style.height = '';
+        $(".zoomed_avatar").css('bottom', '');
-    document.getElementById("avatar_zoom_popup").style.width = '';
+        $(".zoomed_avatar").css('width', '');
-    document.getElementById("avatar_zoom_popup").style.margin = '';
+        $(".zoomed_avatar").css('height', '');
+        $(".zoomed_avatar").css('margin', '');
+    }
+
 
     document.getElementById("WorldInfo").style.top = '';
     document.getElementById("WorldInfo").style.left = '';

public/style.css

@@ -4288,7 +4288,7 @@ body.movingUI .drag-grabber {
 body.movingUI #sheld,
 body.movingUI .drawer-content,
 body.movingUI #expression-holder,
-body.movingUI #avatar_zoom_popup,
+body.movingUI .zoomed_avatar,
 body.movingUI #floatingPrompt {
     resize: both;
 }
@@ -4315,7 +4315,7 @@ body.noShadows * {
     color: var(--SmartThemeBodyColor);
 }
 
-#avatar_zoom_popup {
+.zoomed_avatar {
     min-width: 100px;
     min-height: 100px;
     max-height: 90vh;
@@ -4331,7 +4331,7 @@ body.noShadows * {
     aspect-ratio: 2 / 3;
 }
 
-body.waifuMode #avatar_zoom_popup {
+body.waifuMode .zoomed_avatar {
     min-width: 100px;
     min-height: 100px;
     max-height: 90vh;
@@ -4350,7 +4350,7 @@ body.waifuMode #avatar_zoom_popup {
     aspect-ratio: 2 / 3;
 }
 
-#zoomed_avatar {
+.zoomed_avatar img {
     border: 1px solid var(--white50a);
     border-radius: 20px;
     height: 100%;
@@ -4424,7 +4424,7 @@ body.waifuMode #avatar_zoom_popup {
         min-width: 100% !important;
     }
 
-    #avatar_zoom_popup {
+    .zoomed_avatar {
         min-width: 100px;
         min-height: 100px;
         max-height: 90vh;
@@ -4665,13 +4665,14 @@ body.waifuMode #avatar_zoom_popup {
         object-fit: cover;
     }
 
-    body:not(.waifuMode) #avatar_zoom_popup {
+    body:not(.waifuMode) .zoomed_avatar {
-        z-index: 999;
+        display: none;
+        /*         z-index: 999;
         width: fit-content;
-        max-height: calc(60svh - 60px);
+        max-height: calc(60svh - 60px); */
     }
 
-    body.waifuMode #avatar_zoom_popup {
+    body.waifuMode .zoomed_avatar {
         width: fit-content;
         max-height: calc(60svh - 60px);
         max-width: 90svw;
@@ -4779,4 +4780,4 @@ body.waifuMode #avatar_zoom_popup {
     #horde_model {
         height: unset;
     }
-}
+}