additional tag edditing functionality. and delete by tag. added import tuning options to settings

app/static/js/modal-pagination.js

@@ -115,6 +115,14 @@ document.addEventListener('DOMContentLoaded', () => {
     autocompleteSelectedIndex = -1;
   }
 
+  function positionAutocomplete() {
+    if (!tagAutocomplete || !tagInput) return;
+    const rect = tagInput.getBoundingClientRect();
+    tagAutocomplete.style.top = `${rect.bottom + 4}px`;
+    tagAutocomplete.style.left = `${rect.left}px`;
+    tagAutocomplete.style.width = `${rect.width}px`;
+  }
+
   function renderAutocomplete(tags) {
     if (!tagAutocomplete) return;
     autocompleteItems = tags;
@@ -122,6 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     if (tags.length === 0) {
       tagAutocomplete.innerHTML = '<div class="tag-autocomplete-empty">No matching tags</div>';
+      positionAutocomplete();
       tagAutocomplete.classList.add('active');
       return;
     }
@@ -134,6 +143,7 @@ document.addEventListener('DOMContentLoaded', () => {
         <span class="tag-kind">${t.kind || 'user'}</span>
       </div>`;
     }).join('');
+    positionAutocomplete();
     tagAutocomplete.classList.add('active');
   }
 
@@ -214,9 +224,11 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // Click on autocomplete item
+  // Click on autocomplete item - use mousedown to fire before blur
   if (tagAutocomplete) {
-    tagAutocomplete.addEventListener('click', (e) => {
+    tagAutocomplete.addEventListener('mousedown', (e) => {
+      e.preventDefault(); // Prevent blur from firing
+      e.stopPropagation();
       const item = e.target.closest('.tag-autocomplete-item');
       if (!item) return;
       const name = item.dataset.name;

app/static/js/showcase.js

@@ -10,7 +10,7 @@
   const MOBILE_COLUMNS = 2;
   const MOBILE_BREAKPOINT = 768;
   const SCROLL_THRESHOLD = 1500; // Load more when 1500px from bottom (about 2-3 rows ahead)
-  const LOAD_BATCH_SIZE = 12;
+  const LOAD_BATCH_SIZE = 4;
 
   // State
   let columns = [];

app/static/style.css

@@ -353,17 +353,25 @@ header {
   padding: 1rem;
 }
 
-/* Modal body */
+/* Modal body - horizontal layout with image on left, tags on right */
 .modal-body {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  align-items: flex-start;
   gap: 1rem;
   width: 100%;
-  max-width: 1400px;
+  max-width: 1600px;
   max-height: 100%;
 }
 
+/* On smaller screens, stack vertically */
+@media (max-width: 900px) {
+  .modal-body {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
 /* Image wrapper & zoom */
 .modal-image-wrapper {
   flex: 1;
@@ -494,14 +502,27 @@ header {
 .tag-chip:hover { background: rgba(255,255,255,1); }
 
 
-/* Modal tag editor - refined layout */
+/* Modal tag editor - side panel layout */
 .tag-editor {
-  width: 100%;
-  max-width: 500px;
+  width: 280px;
+  min-width: 280px;
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 8px;
   padding: 0.75rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+/* On smaller screens, make tag editor full width */
+@media (max-width: 900px) {
+  .tag-editor {
+    width: 100%;
+    max-width: 500px;
+    min-width: unset;
+    max-height: unset;
+  }
 }
 
 .tag-editor .tags {
@@ -578,21 +599,18 @@ header {
   background: var(--btn-primary-hover);
 }
 
-/* Autocomplete dropdown */
+/* Autocomplete dropdown - uses fixed positioning to escape overflow containers */
 .tag-autocomplete {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
+  position: fixed;
   background: var(--panel);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 6px;
-  margin-top: 4px;
-  max-height: 200px;
+  max-height: 240px;
   overflow-y: auto;
-  z-index: 1010;
+  z-index: 10100;
   display: none;
   box-shadow: var(--shadow-3);
+  min-width: 200px;
 }
 .tag-autocomplete.active {
   display: block;