Merge pull request #2908 from SillyTavern/gallery-improvements Improve gallery layout

57fdaeba81a3b06b12b64559bf17964b3c91c2df

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/scripts/extensions/gallery/index.js+8 -6 Viewed

 let paginationMaxLinesPerPage = 2;
 let galleryMaxRows = 3;
-$('body').on('click', '.dragClose', function () {
+// Remove all draggables associated with the gallery
-    const relatedId = $(this).data('related-id');  // Get the ID of the related draggable
+$('#movingDivs').on('click', '.dragClose', function () {
-    $(`body > .draggable[id="${relatedId}"]`).remove();  // Remove the associated draggable
+    const relatedId = $(this).data('related-id');
+    if (!relatedId) return;
+    $(`#movingDivs > .draggable[id="${relatedId}"]`).remove();
 });
 const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';

     $('#dragGallery').css('display', 'block');
-    $('body').append(newElement);
+    $('#movingDivs').append(newElement);
     loadMovingUIState();
     $(`.draggable[forChar="${id}"]`).css('display', 'block');

@@ -362,8 +364,8 @@ function makeDragImg(id, url) {
362	}	364	}
363	}	365	}
364		366
365	// Step 3: Attach it to the body	367	// Step 3: Attach it to the movingDivs container
366	document.body.appendChild(newElement);	368	document.getElementById('movingDivs').appendChild(newElement);
367		369
368	// Step 4: Call dragElement and loadMovingUIState	370	// Step 4: Call dragElement and loadMovingUIState
369	const appendedElement = document.getElementById(uniqueId);	371	const appendedElement = document.getElementById(uniqueId);

public/style.css+0 -7 Viewed

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