From f41acb40f650ad738c0965d7afa86e905c884588 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bvandeusen@cognitheurge.com>
Date: Wed, 21 Jan 2026 22:52:20 -0500
Subject: [PATCH] correct mass tag edit menu overlap

---
 app/static/js/bulk-select.js | 13 +++++++++++--
 app/static/style.css         | 17 +++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/app/static/js/bulk-select.js b/app/static/js/bulk-select.js
index 1c4d542..a22d81f 100644
--- a/app/static/js/bulk-select.js
+++ b/app/static/js/bulk-select.js
@@ -344,9 +344,18 @@
   function positionAutocomplete() {
     if (!dom.autocomplete || !dom.tagInput) return;
     const rect = dom.tagInput.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const dropdownWidth = rect.width;
+
+    // Calculate left position, ensuring dropdown doesn't overflow right edge
+    let leftPos = rect.left;
+    if (leftPos + dropdownWidth > viewportWidth - 8) {
+      leftPos = viewportWidth - dropdownWidth - 8;
+    }
+
     dom.autocomplete.style.top = `${rect.bottom + 4}px`;
-    dom.autocomplete.style.left = `${rect.left}px`;
-    dom.autocomplete.style.width = `${rect.width}px`;
+    dom.autocomplete.style.left = `${leftPos}px`;
+    dom.autocomplete.style.width = `${dropdownWidth}px`;
   }
 
   async function fetchAutocomplete(query) {
diff --git a/app/static/style.css b/app/static/style.css
index bf7a952..ab3642e 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -671,6 +671,8 @@ header {
   display: none;
   box-shadow: var(--shadow-3);
   min-width: 200px;
+  max-width: calc(100vw - 16px);
+  box-sizing: border-box;
 }
 .tag-autocomplete.active {
   display: block;
@@ -1584,6 +1586,19 @@ body.select-mode .gallery-item:hover {
   color: white;
 }
 
+/* Push gallery content left when bulk editor panel is visible */
+body.select-mode .gallery-infinite-container {
+  margin-right: 320px;
+  transition: margin-right 0.3s ease;
+}
+
+@media (max-width: 768px) {
+  /* On mobile, don't shift content - panel will overlay */
+  body.select-mode .gallery-infinite-container {
+    margin-right: 0;
+  }
+}
+
 /*------------------------------------------------------------------------------
   Bulk Editor Panel (slide-in sidebar)
 ------------------------------------------------------------------------------*/
@@ -1601,6 +1616,8 @@ body.select-mode .gallery-item:hover {
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-3);
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .bulk-editor-panel.active {