Fix the rest of mobile cases

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*/

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"

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;
                 }

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 {