Improve gallery layout

Closes #2907

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

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;