From 061ed1db65dca2a6fc3b6a127a72c0bdb41b1aa7 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Fri, 27 Sep 2024 08:02:08 +0000
Subject: [PATCH] Improve gallery layout Closes #2907

---
 public/scripts/extensions/gallery/index.js | 10 +++++-----
 public/style.css                           |  7 -------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/public/scripts/extensions/gallery/index.js b/public/scripts/extensions/gallery/index.js
index 2e2d51a31..d74935802 100644
--- a/public/scripts/extensions/gallery/index.js
+++ b/public/scripts/extensions/gallery/index.js
@@ -26,9 +26,9 @@ let paginationVisiblePages = 10;
 let paginationMaxLinesPerPage = 2;
 let galleryMaxRows = 3;
 
-$('body').on('click', '.dragClose', function () {
+$('#movingDivs').on('click', '.dragClose', function () {
     const relatedId = $(this).data('related-id');  // Get the ID of the related draggable
-    $(`body > .draggable[id="${relatedId}"]`).remove();  // Remove the associated draggable
+    $(`#movingDivs > .draggable[id="${relatedId}"]`).remove();  // Remove the associated draggable
 });
 
 const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';
@@ -290,7 +290,7 @@ function makeMovable(id = 'gallery') {
 
     $('#dragGallery').css('display', 'block');
 
-    $('body').append(newElement);
+    $('#movingDivs').append(newElement);
 
     loadMovingUIState();
     $(`.draggable[forChar="${id}"]`).css('display', 'block');
@@ -362,8 +362,8 @@ function makeDragImg(id, url) {
         }
     }
 
-    // Step 3: Attach it to the body
-    document.body.appendChild(newElement);
+    // Step 3: Attach it to the movingDivs container
+    document.getElementById('movingDivs').appendChild(newElement);
 
     // Step 4: Call dragElement and loadMovingUIState
     const appendedElement = document.getElementById(uniqueId);
diff --git a/public/style.css b/public/style.css
index 335bff05c..476765b07 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5386,13 +5386,6 @@ body:not(.movingUI) .drawer-content.maximized {
 
 /* Jank mobile support for gallery and future draggables */
 @media screen and (max-width: 1000px) {
-    #gallery {
-        display: block;
-        width: 100vw;
-        height: 100vh;
-        z-index: 9999;
-    }
-
     .draggable {
         display: block;
         width: 100vw;