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] 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 {