From 0c4da602ab26c44176b40afb8720034ce127da39 Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 02:57:57 +0200
Subject: [PATCH 01/13] Adjust style and add magnification to zoomed avatar

---
 public/index.html             |  10 +-
 public/lib/jquery.izoomify.js | 216 ++++++++++++++++++++++++++++++++++
 public/script.js              |  11 +-
 public/style.css              |  15 ++-
 4 files changed, 245 insertions(+), 7 deletions(-)
 create mode 100644 public/lib/jquery.izoomify.js

diff --git a/public/index.html b/public/index.html
index a4d645bf0..a24f08b4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -49,6 +49,7 @@
     <script src="lib/svg-inject.js"></script>
     <script src="lib/Readability.js"></script>
     <script src="lib/Readability-readerable.js"></script>
+    <script src="lib/jquery.izoomify.js"></script>
     <script type="module" src="lib/structured-clone/monkey-patch.js"></script>
     <script type="module" src="lib/swiped-events.js"></script>
     <script type="module" src="lib/eventemitter.js"></script>
@@ -5941,8 +5942,13 @@
     </div>
     <div id="zoomed_avatar_template" class="template_element">
         <div class="zoomed_avatar">
-            <div id="" class="fa-solid fa-grip drag-grabber"></div>
-            <img class="zoomed_avatar_img" src="">
+            <div class="fa-solid fa-grip drag-grabber"></div>
+            <div class="zoomed_avatar_container">
+                <img class="zoomed_avatar_img" src=""
+                     data-izoomify-url=""
+                     data-izoomify-magnify="1.8"
+                     data-izoomify-duration="300" alt="">
+            </div>
         </div>
     </div>
     <template id="generic_draggable_template">
diff --git a/public/lib/jquery.izoomify.js b/public/lib/jquery.izoomify.js
new file mode 100644
index 000000000..f8a9e1e91
--- /dev/null
+++ b/public/lib/jquery.izoomify.js
@@ -0,0 +1,216 @@
+/*!
+*	@name: jquery-izoomify
+*   @version: 1.0
+*	@author: Carl Lomer Abia
+*/
+
+(function ($) {
+    var defaults = {
+        callback: false,
+        target: false,
+        duration: 120,
+        magnify: 1.2,
+        touch: true,
+        url: false
+    };
+
+    var _izoomify = function (target, duration, magnify, url) {
+        var xPos,
+            yPos,
+            $elTarget = $(target),
+            $imgTarget = $elTarget.find('img:first'),
+            imgOrigSrc = $imgTarget.attr('src'),
+            imgSwapSrc,
+            defaultOrigin = 'center top ' + 0 + 'px',
+            resultOrigin,
+            dUrl = 'data-izoomify-url',
+            dMagnify = 'data-izoomify-magnify',
+            dDuration = 'data-izoomify-duration',
+            eClass = 'izoomify-in',
+            eMagnify,
+            eDuration;
+
+        function imageSource(imgSource) {
+            var _img = new Image();
+            _img.src = imgSource;
+            return _img.src;
+        }
+
+        function getImageAttribute($img, dataAttribute, defaultAttribute) {
+            if ($img.attr(dataAttribute)) {
+                return $img.attr(dataAttribute);
+            }
+
+            return defaultAttribute;
+        }
+
+        function getImageSource($img, dataImageSource, defaultImageSource) {
+            if ($img.attr(dataImageSource)) {
+                return imageSource($img.attr(dataImageSource));
+            }
+
+            return defaultImageSource ? imageSource(defaultImageSource) : false;
+        }
+
+        function getTouches(e) {
+            return e.touches || e.originalEvent.touches;
+        }
+
+        imgSwapSrc = getImageSource($imgTarget, dUrl, url);
+
+        eMagnify = getImageAttribute($imgTarget, dMagnify, magnify);
+
+        eDuration = getImageAttribute($imgTarget, dDuration, duration);
+
+        $elTarget
+            .addClass(eClass)
+            .css({
+                'position': 'relative',
+                'overflow': 'hidden'
+            });
+
+        $imgTarget.css({
+            '-webkit-transition-property': '-webkit-transform',
+            'transition-property': '-webkit-transform',
+            '-o-transition-property': 'transform',
+            'transition-property': 'transform',
+            'transition-property': 'transform, -webkit-transform',
+            '-webkit-transition-timing-function': 'ease',
+            '-o-transition-timing-function': 'ease',
+            'transition-timing-function': 'ease',
+            '-webkit-transition-duration': eDuration + 'ms',
+            '-o-transition-duration': eDuration + 'ms',
+            'transition-duration': eDuration + 'ms',
+            '-webkit-transform': 'scale(1)',
+            '-ms-transform': 'scale(1)',
+            'transform': 'scale(1)',
+            '-webkit-transform-origin': defaultOrigin,
+            '-ms-transform-origin': defaultOrigin,
+            'transform-origin': defaultOrigin
+        });
+
+        return {
+            moveStart: function (e, hasTouch) {
+                var o = $(target).offset();
+
+                if (hasTouch) {
+                    e.preventDefault();
+                    xPos = getTouches(e)[0].clientX - o.left;
+                    yPos = getTouches(e)[0].clientY - o.top;
+                } else {
+                    xPos = e.pageX - o.left;
+                    yPos = e.pageY - o.top;
+                }
+
+                resultOrigin = xPos + 'px ' + yPos + 'px ' + 0 + 'px';
+
+                $imgTarget
+                    .css({
+                        '-webkit-transform': 'scale(' + eMagnify + ')',
+                        '-ms-transform': 'scale(' + eMagnify + ')',
+                        'transform': 'scale(' + eMagnify + ')',
+                        '-webkit-transform-origin': resultOrigin,
+                        '-ms-transform-origin': resultOrigin,
+                        'transform-origin': resultOrigin
+                    })
+                    .attr('src', imgSwapSrc || imgOrigSrc);
+            },
+            moveEnd: function () {
+                this.reset();
+            },
+            reset: function () {
+                resultOrigin = defaultOrigin;
+
+                $imgTarget
+                    .css({
+                        '-webkit-transform': 'scale(1)',
+                        '-ms-transform': 'scale(1)',
+                        'transform': 'scale(1)',
+                        '-webkit-transform-origin': resultOrigin,
+                        '-ms-transform-origin': resultOrigin,
+                        'transform-origin': resultOrigin
+                    })
+                    .attr('src', imgOrigSrc);
+            }
+        }
+    };
+
+    $.fn.izoomify = function (options) {
+        return this.each(function () {
+            var settings = $.extend({}, defaults, options || {}),
+                $target = settings.target && $(settings.target)[0] || this,
+                src = this,
+                $src = $(src),
+                mouseStartEvents = 'mouseover.izoomify mousemove.izoomify',
+                mouseEndEvents = 'mouseleave.izoomify mouseout.izoomify',
+                touchStartEvents = 'touchstart.izoomify touchmove.izoomify',
+                touchEndEvents = 'touchend.izoomify';
+
+            var izoomify = _izoomify($target, settings.duration, settings.magnify, settings.url);
+
+            function startEvent(e, hasTouch) {
+                izoomify.moveStart(e, hasTouch);
+            }
+
+            function endEvent($src) {
+                izoomify.moveEnd();
+
+                if ($src) {
+                    $src
+                        .off(touchStartEvents)
+                        .off(touchEndEvents);
+                }
+            }
+
+            function resetImage() {
+                izoomify.reset();
+            }
+
+            $src.one('izoomify.destroy', function () {
+
+                $src.removeClass('izoomify-in');
+
+                resetImage();
+
+                $src
+                    .off(mouseStartEvents)
+                    .off(mouseEndEvents);
+
+                if (settings.touch) {
+                    $src
+                        .off(touchStartEvents)
+                        .off(touchStartEvents);
+                }
+
+                $target.style.position = '';
+                $target.style.overflow = '';
+
+            }.bind(this));
+
+            $src
+                .on(mouseStartEvents, function (e) {
+                    startEvent(e);
+                })
+                .on(mouseEndEvents, function () {
+                    endEvent();
+                });
+
+            if (settings.touch) {
+                $src
+                    .on(touchStartEvents, function (e) {
+                        e.preventDefault();
+                        startEvent(e, true);
+                    })
+                    .on(touchEndEvents, function () {
+                        endEvent();
+                    });
+            }
+
+            if ($.isFunction(settings.callback)) {
+                settings.callback.call($src);
+            }
+        });
+    };
+
+    $.fn.izoomify.defaults = defaults;
+}(window.jQuery));
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
index 56b2eab8b..27705961e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10213,7 +10213,8 @@ jQuery(async function () {
         const avatarSrc = isDataURL(thumbURL) ? thumbURL : charsPath + targetAvatarImg;
         if ($(`.zoomed_avatar[forChar="${charname}"]`).length) {
             console.debug('removing container as it already existed');
-            $(`.zoomed_avatar[forChar="${charname}"]`).remove();
+            $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
+            setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
         } else {
             console.debug('making new container from template');
             const template = $('#zoomed_avatar_template').html();
@@ -10224,17 +10225,23 @@ jQuery(async function () {
             newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`);
 
             $('body').append(newElement);
+            newElement.fadeIn();
             if (messageElement.attr('is_user') == 'true') { //handle user avatars
                 $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
+                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
             } else if (messageElement.attr('is_system') == 'true' && !isValidCharacter) { //handle system avatars
                 $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
+                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
             } else if (messageElement.attr('is_user') == 'false') { //handle char avatars
                 $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', avatarSrc);
+                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', avatarSrc);
             }
             loadMovingUIState();
-            $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'block');
+            $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
             dragElement(newElement);
 
+            $('.zoomed_avatar_container').izoomify();
+
             $(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
                 console.log('saw drag on avatar!');
                 e.preventDefault();
diff --git a/public/style.css b/public/style.css
index 184070c99..ae3062edb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3811,13 +3811,22 @@ body:not(.movingUI) .drawer-content.maximized {
     background-color: transparent;
     max-width: var(--maxWidth);
     left: var(--leftPosition);
+    position: absolute;
+    height: 100%;
+    max-height: 100vh !important;
+    align-items: center;
+}
+
+.zoomed_avatar_container {
+    width: 100%;
+    margin-inline: 10px;
 }
 
 .zoomed_avatar img {
-    height: 100%;
+    height: unset !important;
     width: 100%;
-    vertical-align: bottom;
-    object-fit: cover;
+    object-fit: contain !important;
+    border-radius: 10px;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */

From ec76742d0eda9c7b7147197983900a7a68d79e78 Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 03:09:44 +0200
Subject: [PATCH 02/13] Fix positioning of the drag icon

Image still gets magnified when the icon is grabbed, but that is a minor aesthetic bug without influence on the functionality
---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index a24f08b4e..1df2fa887 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5942,8 +5942,8 @@
     </div>
     <div id="zoomed_avatar_template" class="template_element">
         <div class="zoomed_avatar">
-            <div class="fa-solid fa-grip drag-grabber"></div>
             <div class="zoomed_avatar_container">
+                <div class="fa-solid fa-grip drag-grabber"></div>
                 <img class="zoomed_avatar_img" src=""
                      data-izoomify-url=""
                      data-izoomify-magnify="1.8"

From 384708f577ddd341567b2b5e3784790f3b0c38b0 Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 16:12:13 +0200
Subject: [PATCH 03/13] Close zoomed image on click

---
 public/script.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/public/script.js b/public/script.js
index ade0b9696..6c258b7e0 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10242,6 +10242,11 @@ jQuery(async function () {
 
             $('.zoomed_avatar_container').izoomify();
 
+            $(`.zoomed_avatar[forChar="${charname}"] img`).on('click', (e) => {
+                $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
+                setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
+            });
+
             $(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
                 console.log('saw drag on avatar!');
                 e.preventDefault();

From 835d6c71fa3d2aee899e29a1f467607c4974e4c1 Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 16:59:51 +0200
Subject: [PATCH 04/13] Add option to toggle magnification behaviour

---
 public/index.html            |  5 +++++
 public/script.js             | 21 ++++++++++-----------
 public/scripts/power-user.js | 19 +++++++++++++++++--
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1df2fa887..f96c78a85 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3739,6 +3739,11 @@
                                 <span data-i18n="Tags as Folders">Tags as Folders</span>
                                 <i title="Recent change: Tags must be marked as folders in the Tag Management menu to appear as such. Click here to bring it up." class="tags_view right_menu_button fa-solid fa-circle-exclamation"></i>
                             </label>
+                            <label for="zoomed_avatar_magnification" class="checkbox_label" title="Enable magnification for zoomed avatar display." data-i18n="[title]Enable magnification for zoomed avatar display.">
+                                <input id="zoomed_avatar_magnification" type="checkbox" />
+                                <span data-i18n="Avatar Hover Magnification">Avatar Hover Magnification</span>
+                                <i title="Enables a magnification effect on hover when you display the zoomed avatar after clicking an avatar's image in chat." class="right_menu_button fa-solid fa-circle-exclamation"></i>
+                            </label>
                         </div>
                         <h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
                         <div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
diff --git a/public/script.js b/public/script.js
index 6c258b7e0..66f47fd8c 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10226,28 +10226,27 @@ jQuery(async function () {
 
             $('body').append(newElement);
             newElement.fadeIn();
-            if (messageElement.attr('is_user') == 'true') { //handle user avatars
-                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
-                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
-            } else if (messageElement.attr('is_system') == 'true' && !isValidCharacter) { //handle system avatars
-                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
-                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
+            const zoomedAvatarImgElement = $(`.zoomed_avatar[forChar="${charname}"] img`);
+            if (messageElement.attr('is_user') == 'true' || (messageElement.attr('is_system') == 'true' && !isValidCharacter)) { //handle user and system avatars
+                zoomedAvatarImgElement.attr('src', thumbURL);
+                zoomedAvatarImgElement.attr('data-izoomify-url', thumbURL);
             } else if (messageElement.attr('is_user') == 'false') { //handle char avatars
-                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', avatarSrc);
-                $(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', avatarSrc);
+                zoomedAvatarImgElement.attr('src', avatarSrc);
+                zoomedAvatarImgElement.attr('data-izoomify-url', avatarSrc);
             }
             loadMovingUIState();
             $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
             dragElement(newElement);
 
-            $('.zoomed_avatar_container').izoomify();
+            if (power_user.zoomed_avatar_magnification)
+                $('.zoomed_avatar_container').izoomify();
 
-            $(`.zoomed_avatar[forChar="${charname}"] img`).on('click', (e) => {
+            zoomedAvatarImgElement.on('click', (e) => {
                 $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
                 setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
             });
 
-            $(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
+            zoomedAvatarImgElement.on('dragstart', (e) => {
                 console.log('saw drag on avatar!');
                 e.preventDefault();
                 return false;
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 35f4984b7..24d954f15 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -247,6 +247,7 @@ let power_user = {
     encode_tags: false,
     servers: [],
     bogus_folders: false,
+    zoomed_avatar_magnification: false,
     show_tag_filters: false,
     aux_field: 'character_version',
     restore_user_input: true,
@@ -1303,6 +1304,13 @@ async function applyTheme(name) {
                 printCharactersDebounced();
             },
         },
+        {
+            key: 'zoomed_avatar_magnification',
+            action: async () => {
+                $('#zoomed_avatar_magnification').prop('checked', power_user.zoomed_avatar_magnification);
+                printCharactersDebounced();
+            },
+        },
         {
             key: 'reduced_motion',
             action: async () => {
@@ -1498,6 +1506,7 @@ function loadPowerUserSettings(settings, data) {
     $('#auto_fix_generated_markdown').prop('checked', power_user.auto_fix_generated_markdown);
     $('#auto_scroll_chat_to_bottom').prop('checked', power_user.auto_scroll_chat_to_bottom);
     $('#bogus_folders').prop('checked', power_user.bogus_folders);
+    $('#zoomed_avatar_magnification').prop('checked', power_user.zoomed_avatar_magnification);
     $(`#tokenizer option[value="${power_user.tokenizer}"]`).attr('selected', true);
     $(`#send_on_enter option[value=${power_user.send_on_enter}]`).attr('selected', true);
     $('#import_card_tags').prop('checked', power_user.import_card_tags);
@@ -2148,6 +2157,7 @@ async function saveTheme(name = undefined) {
         hotswap_enabled: power_user.hotswap_enabled,
         custom_css: power_user.custom_css,
         bogus_folders: power_user.bogus_folders,
+        zoomed_avatar_magnification: power_user.zoomed_avatar_magnification,
         reduced_motion: power_user.reduced_motion,
         compact_input_area: power_user.compact_input_area,
     };
@@ -3410,8 +3420,13 @@ $(document).ready(() => {
     });
 
     $('#bogus_folders').on('input', function () {
-        const value = !!$(this).prop('checked');
-        power_user.bogus_folders = value;
+        power_user.bogus_folders = !!$(this).prop('checked');
+        printCharactersDebounced();
+        saveSettingsDebounced();
+    });
+
+    $('#zoomed_avatar_magnification').on('input', function () {
+        power_user.zoomed_avatar_magnification = !!$(this).prop('checked');
         printCharactersDebounced();
         saveSettingsDebounced();
     });

From 928fa7a3fc5ecba6387d91fc30328bd7931661be Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 17:12:26 +0200
Subject: [PATCH 05/13] Close zoomed image when clicking the parent div instead
 of image

Makes it easier to close on mobile
---
 public/css/mobile-styles.css | 2 --
 public/script.js             | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index c5e4eb1a7..dbc2d61a3 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -28,7 +28,6 @@
         z-index: 30;
         overflow: hidden;
         right: 0;
-        top: 50px;
         aspect-ratio: 2 / 3;
         width: fit-content;
         max-height: calc(60vh - 60px);
@@ -373,7 +372,6 @@
         overflow: hidden;
         display: none;
         right: 0;
-        top: 50px;
         aspect-ratio: 2 / 3;
         left: 50%;
         transform: translateX(-50%);
diff --git a/public/script.js b/public/script.js
index 66f47fd8c..da93f0457 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10241,7 +10241,7 @@ jQuery(async function () {
             if (power_user.zoomed_avatar_magnification)
                 $('.zoomed_avatar_container').izoomify();
 
-            zoomedAvatarImgElement.on('click', (e) => {
+            $('.zoomed_avatar').on('click', (e) => {
                 $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
                 setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
             });

From 22e4721eada00e2fd154690a38fb5af8561e138f Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 18:26:40 +0200
Subject: [PATCH 06/13] Move zoomed avatar back down to match old display

---
 public/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index ae3062edb..6ee1635d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3814,7 +3814,7 @@ body:not(.movingUI) .drawer-content.maximized {
     position: absolute;
     height: 100%;
     max-height: 100vh !important;
-    align-items: center;
+    align-items: end;
 }
 
 .zoomed_avatar_container {

From fcb47c94018b891deb211123b2f0934857e1fac7 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:13:45 +0300
Subject: [PATCH 07/13] Fix zoomed avatars with moving UI

---
 public/css/toggle-dependent.css | 1 +
 public/style.css                | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index 3f90edc42..30fb33bcf 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -393,6 +393,7 @@ body.waifuMode .zoomed_avatar {
     margin: 0 auto;
     top: 50px;
     aspect-ratio: 2 / 3;
+    height: auto;
 }
 
 /* movingUI*/
diff --git a/public/style.css b/public/style.css
index 6ee1635d9..6acb15a05 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3812,7 +3812,7 @@ body:not(.movingUI) .drawer-content.maximized {
     max-width: var(--maxWidth);
     left: var(--leftPosition);
     position: absolute;
-    height: 100%;
+    height: auto;
     max-height: 100vh !important;
     align-items: end;
 }

From 1de409fdf7f4664dee60d802e056974229701549 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:20:22 +0300
Subject: [PATCH 08/13] Don't force aspect ratio of zoomed avatars. Prevent
 closing on drag grabber.

---
 public/script.js | 3 +++
 public/style.css | 1 -
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/script.js b/public/script.js
index da93f0457..4d067f496 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10242,6 +10242,9 @@ jQuery(async function () {
                 $('.zoomed_avatar_container').izoomify();
 
             $('.zoomed_avatar').on('click', (e) => {
+                if (e.target.closest('.drag-grabber')) {
+                    return;
+                }
                 $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
                 setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
             });
diff --git a/public/style.css b/public/style.css
index 6acb15a05..7f18f380f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3805,7 +3805,6 @@ body:not(.movingUI) .drawer-content.maximized {
     --leftGapWidth: calc((100vw - var(--sheldWidth)) / 2);
     /* Left position of the avatar (half of the gap minus half of the avatar width) */
     --leftPosition: max(0px, calc((var(--leftGapWidth) - var(--maxWidth)) / 2));
-    aspect-ratio: 2 / 3;
     padding: 0;
     border: 0;
     background-color: transparent;

From a89916031191fedf34641769d59f72876c4a0fae Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:27:01 +0300
Subject: [PATCH 09/13] Use global animation duration for avatars

---
 public/script.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/script.js b/public/script.js
index 4d067f496..9ff63cbb0 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10213,8 +10213,9 @@ jQuery(async function () {
         const avatarSrc = isDataURL(thumbURL) ? thumbURL : charsPath + targetAvatarImg;
         if ($(`.zoomed_avatar[forChar="${charname}"]`).length) {
             console.debug('removing container as it already existed');
-            $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
-            setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
+            $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
+                $(`.zoomed_avatar[forChar="${charname}"]`).remove();
+            });
         } else {
             console.debug('making new container from template');
             const template = $('#zoomed_avatar_template').html();
@@ -10225,7 +10226,7 @@ jQuery(async function () {
             newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`);
 
             $('body').append(newElement);
-            newElement.fadeIn();
+            newElement.fadeIn(animation_duration);
             const zoomedAvatarImgElement = $(`.zoomed_avatar[forChar="${charname}"] img`);
             if (messageElement.attr('is_user') == 'true' || (messageElement.attr('is_system') == 'true' && !isValidCharacter)) { //handle user and system avatars
                 zoomedAvatarImgElement.attr('src', thumbURL);
@@ -10245,8 +10246,9 @@ jQuery(async function () {
                 if (e.target.closest('.drag-grabber')) {
                     return;
                 }
-                $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
-                setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
+                $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
+                    $(`.zoomed_avatar[forChar="${charname}"]`).remove();
+                });
             });
 
             zoomedAvatarImgElement.on('dragstart', (e) => {

From e3f24ac3a006128918fc8901345d90b8cf512290 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:43:17 +0300
Subject: [PATCH 10/13] Fix mobile and ipads

---
 public/css/mobile-styles.css | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index dbc2d61a3..8b68498d9 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -28,14 +28,18 @@
         z-index: 30;
         overflow: hidden;
         right: 0;
-        aspect-ratio: 2 / 3;
         width: fit-content;
         max-height: calc(60vh - 60px);
         max-height: calc(60svh - 60px);
         max-width: 90vw;
         max-width: 90svw;
         left: 50%;
-        transform: translateX(-50%);
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        width: 100%;
     }
 
     /* .world_entry_thin_controls, */
@@ -346,12 +350,17 @@
     }
 
     body:not(.waifuMode) .zoomed_avatar {
-
-        width: fit-content;
         max-height: calc(60vh - 60px);
         max-height: calc(60svh - 60px);
         max-width: 90vw;
         max-width: 90svw;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        width: 100%;
     }
 
 
@@ -372,9 +381,13 @@
         overflow: hidden;
         display: none;
         right: 0;
-        aspect-ratio: 2 / 3;
         left: 50%;
-        transform: translateX(-50%);
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        width: 100%;
     }
 
     .drawer25pWidth {

From 23ac23010d24f9732abef8bb189b56a4b5cee0d1 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 14 Apr 2024 21:17:18 +0300
Subject: [PATCH 11/13] Fix the rest of mobile cases

---
 public/css/mobile-styles.css |  6 ++++--
 public/index.html            |  5 ++++-
 public/script.js             |  7 +++++--
 public/style.css             | 12 +++++++++---
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index 8b68498d9..68534d8a2 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -42,6 +42,10 @@
         width: 100%;
     }
 
+    .zoomed_avatar .dragClose {
+        display: unset;
+    }
+
     /* .world_entry_thin_controls, */
     #persona-management-block,
     #character_popup .flex-container {
@@ -362,8 +366,6 @@
         height: fit-content;
         width: 100%;
     }
-
-
 }
 
 /*portrait mode phones*/
diff --git a/public/index.html b/public/index.html
index f96c78a85..7d2a539af 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5948,7 +5948,10 @@
     <div id="zoomed_avatar_template" class="template_element">
         <div class="zoomed_avatar">
             <div class="zoomed_avatar_container">
-                <div class="fa-solid fa-grip drag-grabber"></div>
+                <div class="panelControlBar flex-container">
+                    <div class="fa-fw fa-solid fa-grip drag-grabber"></div>
+                    <div class="fa-fw fa-solid fa-circle-xmark dragClose"></div>
+                </div>
                 <img class="zoomed_avatar_img" src=""
                      data-izoomify-url=""
                      data-izoomify-magnify="1.8"
diff --git a/public/script.js b/public/script.js
index 9ff63cbb0..a94527581 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10239,10 +10239,13 @@ jQuery(async function () {
             $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
             dragElement(newElement);
 
-            if (power_user.zoomed_avatar_magnification)
+            if (power_user.zoomed_avatar_magnification) {
                 $('.zoomed_avatar_container').izoomify();
+            } else {
+                $(`.zoomed_avatar[forChar="${charname}"] .dragClose`).hide();
+            }
 
-            $('.zoomed_avatar').on('click', (e) => {
+            $('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => {
                 if (e.target.closest('.drag-grabber')) {
                     return;
                 }
diff --git a/public/style.css b/public/style.css
index 7f18f380f..cb8403fed 100644
--- a/public/style.css
+++ b/public/style.css
@@ -532,14 +532,14 @@ body.reduced-motion #bg_custom {
     opacity: 1;
 }
 
-.panelControlBar {
+body .panelControlBar {
     position: absolute;
     right: 5px;
     top: 5px;
-    margin-right: 5px;
     z-index: 2000;
     min-width: 55px;
     justify-content: flex-end;
+    gap: 0px;
 }
 
 .panelControlBar .drag-grabber {
@@ -3812,13 +3812,19 @@ body:not(.movingUI) .drawer-content.maximized {
     left: var(--leftPosition);
     position: absolute;
     height: auto;
-    max-height: 100vh !important;
+    max-height: 90vh !important;
     align-items: end;
 }
 
+.zoomed_avatar .dragClose {
+    display: none;
+}
+
 .zoomed_avatar_container {
     width: 100%;
     margin-inline: 10px;
+    max-height: 90vh;
+    max-width: 90svh;
 }
 
 .zoomed_avatar img {

From 31077629f1ddce36d79c417e3976d2aaa36ab7b9 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 14 Apr 2024 21:22:21 +0300
Subject: [PATCH 12/13] Decrease char.button growth on wide tablets

---
 public/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index cb8403fed..98bf16c5d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2226,7 +2226,7 @@ grammarly-extension {
     text-align: center;
     font-size: 17px;
     aspect-ratio: 1 / 1;
-    flex: 0.075;
+    flex: 0.05;
 }
 
 .menu_button:hover,

From 54eec3e21507f156d0ac6a25b99f0948efa6d30e Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Sun, 14 Apr 2024 22:17:38 +0200
Subject: [PATCH 13/13] Separate handling for closing for mobile and desktop

Clicking on the image only closes on desktop now, while on mobile the close button has to be pressed as touch is used for the magnification
---
 public/index.html |  2 +-
 public/script.js  | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7d2a539af..b7664775d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5950,7 +5950,7 @@
             <div class="zoomed_avatar_container">
                 <div class="panelControlBar flex-container">
                     <div class="fa-fw fa-solid fa-grip drag-grabber"></div>
-                    <div class="fa-fw fa-solid fa-circle-xmark dragClose"></div>
+                    <div class="fa-fw fa-solid fa-circle-xmark dragClose" id="closeZoom"></div>
                 </div>
                 <img class="zoomed_avatar_img" src=""
                      data-izoomify-url=""
diff --git a/public/script.js b/public/script.js
index a94527581..fc2ea8c53 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10245,7 +10245,7 @@ jQuery(async function () {
                 $(`.zoomed_avatar[forChar="${charname}"] .dragClose`).hide();
             }
 
-            $('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => {
+            $('.zoomed_avatar').on('mouseup', (e) => {
                 if (e.target.closest('.drag-grabber')) {
                     return;
                 }
@@ -10254,6 +10254,14 @@ jQuery(async function () {
                 });
             });
 
+            $('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => {
+                if (e.target.closest('.dragClose')) {
+                    $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
+                        $(`.zoomed_avatar[forChar="${charname}"]`).remove();
+                    });
+                }
+            });
+
             zoomedAvatarImgElement.on('dragstart', (e) => {
                 console.log('saw drag on avatar!');
                 e.preventDefault();