From 96f19636e60fad0872f2b99ca1ba99e9517d78bb Mon Sep 17 00:00:00 2001
From: develop1st <80186227+develop1st@users.noreply.github.com>
Date: Thu, 16 Apr 2026 04:02:57 -0700
Subject: [PATCH] Fix mobile lightbox sidebar overlap and add collapse setting
 (#141)

- Fix sidebar width calculation for mobile/tablet devices to prevent image overlap
- Add 'Collapse Sidebar by Default' setting in Display Settings
- Fix arrow direction to be intuitive (right when open, left when closed)
- Make sidebar fully slide off-screen when collapsed instead of partial visibility
---
 web/gallery.html                   |  4 +++
 web/js/gallery.js                  | 23 +++++++++++++-
 web/lib/tailwind/comfyui-theme.css | 48 +++++++++++++++++++++++++++---
 3 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/web/gallery.html b/web/gallery.html
index f33f104..4b02c1a 100644
--- a/web/gallery.html
+++ b/web/gallery.html
@@ -253,6 +253,10 @@
                             <label class="text-xs text-pm-secondary">Show Media Info</label>
                             <input type="checkbox" id="showImageInfoToggle" checked class="w-4 h-4 text-pm-accent bg-pm-input border-pm rounded focus:ring-pm-accent">
                         </div>
+                        <div class="flex items-center justify-between">
+                            <label class="text-xs text-pm-secondary">Collapse Sidebar by Default</label>
+                            <input type="checkbox" id="sidebarCollapsedByDefaultToggle" class="w-4 h-4 text-pm-accent bg-pm-input border-pm rounded focus:ring-pm-accent">
+                        </div>
                     </div>
 
                     <!-- Video Settings -->
diff --git a/web/js/gallery.js b/web/js/gallery.js
index 49c927b..f1810c2 100644
--- a/web/js/gallery.js
+++ b/web/js/gallery.js
@@ -425,6 +425,11 @@
 
                 document.body.appendChild(sidebar);
 
+                // Apply default collapsed state from settings
+                if (this.getSettings().sidebarCollapsedByDefault) {
+                    sidebar.classList.add('collapsed');
+                }
+
                 // Load metadata for the current image (ALWAYS use original for metadata)
                 const originalImageUrl = originalImage.dataset.original || originalImage.src;
                 console.log('Loading metadata from original image:', originalImageUrl);
@@ -509,9 +514,10 @@
                 // Create a modal that matches the screenshot design
                 const modal = document.createElement('div');
                 modal.className = 'fixed inset-0 bg-black z-50 flex';
+                modal.id = 'image-viewer-modal';
                 modal.innerHTML = `
                     <!-- Image area with navigation -->
-                    <div class="flex-1 flex items-center justify-center relative">
+                    <div class="flex-1 flex items-center justify-center relative image-viewer-area">
                         <!-- Navigation arrows -->
                         <button class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-pm text-xl z-10" id="prevImageBtn">
                             ‹
@@ -580,6 +586,12 @@
                 
                 document.body.appendChild(modal);
                 
+                // Apply default collapsed state from settings
+                const sidebarInModal = modal.querySelector('.metadata-sidebar');
+                if (sidebarInModal && this.getSettings().sidebarCollapsedByDefault) {
+                    sidebarInModal.classList.add('collapsed');
+                }
+                
                 // Add navigation functionality
                 this.setupImageNavigation(modal, imageUrl);
                 
@@ -678,6 +690,12 @@
                 
                 document.body.appendChild(modal);
                 
+                // Apply default collapsed state from settings
+                const sidebarInVideoModal = modal.querySelector('.metadata-sidebar');
+                if (sidebarInVideoModal && this.getSettings().sidebarCollapsedByDefault) {
+                    sidebarInVideoModal.classList.add('collapsed');
+                }
+                
                 // Set up video controls
                 this.setupVideoControls(modal, settings);
                 
@@ -1658,6 +1676,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                 document.getElementById('autoLoadMetadataToggle').checked = settings.autoLoadMetadata;
                 document.getElementById('cacheMetadataToggle').checked = settings.cacheMetadata;
                 document.getElementById('showFilePathsToggle').checked = settings.showFilePaths;
+                document.getElementById('sidebarCollapsedByDefaultToggle').checked = settings.sidebarCollapsedByDefault;
                 document.getElementById('showImageInfoToggle').checked = settings.showImageInfo;
                 document.getElementById('debugModeToggle').checked = settings.debugMode;
                 document.getElementById('checkThumbnailsAtStartup').checked = settings.checkThumbnailsAtStartup;
@@ -1691,6 +1710,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                     autoLoadMetadata: true,
                     cacheMetadata: true,
                     showFilePaths: true,
+                    sidebarCollapsedByDefault: false,
                     debugMode: false,
                     apiTimeout: 30,
                     thumbnailsGenerated: false,
@@ -1724,6 +1744,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                     autoLoadMetadata: document.getElementById('autoLoadMetadataToggle').checked,
                     cacheMetadata: document.getElementById('cacheMetadataToggle').checked,
                     showFilePaths: document.getElementById('showFilePathsToggle').checked,
+                    sidebarCollapsedByDefault: document.getElementById('sidebarCollapsedByDefaultToggle').checked,
                     debugMode: document.getElementById('debugModeToggle').checked,
                     apiTimeout: parseInt(document.getElementById('apiTimeoutInput').value),
                     thumbnailsGenerated: this.getSettings().thumbnailsGenerated, // Preserve this
diff --git a/web/lib/tailwind/comfyui-theme.css b/web/lib/tailwind/comfyui-theme.css
index b20d77c..17c9512 100644
--- a/web/lib/tailwind/comfyui-theme.css
+++ b/web/lib/tailwind/comfyui-theme.css
@@ -143,10 +143,36 @@
   flex-direction: column !important;
   z-index: 10000 !important;
   transition: transform 0.3s ease-in-out !important;
+  /* Ensure sidebar doesn't exceed viewport width on mobile */
+  max-width: 100vw !important;
+  transform: translateX(0) !important;
 }
 
 .metadata-sidebar.collapsed {
-  transform: translateX(340px) !important;
+  transform: translateX(100%) !important;
+}
+
+/* Mobile responsive adjustments - adjust all related elements */
+@media (max-width: 1024px) {
+  .metadata-sidebar {
+    width: min(70vw, 320px) !important;
+  }
+  
+  .metadata-sidebar.collapsed {
+    transform: translateX(100%) !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .metadata-sidebar {
+    width: min(75vw, 300px) !important;
+    background: var(--pm-bg-surface) !important;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3) !important;
+  }
+  
+  .metadata-sidebar.collapsed {
+    transform: translateX(100%) !important;
+  }
 }
 
 .metadata-collapse-btn {
@@ -160,7 +186,7 @@
   border: 1px solid var(--pm-border);
   border-right: none;
   border-radius: var(--pm-radius-sm) 0 0 var(--pm-radius-sm);
-  display: flex;
+  display: flex !important;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -169,8 +195,22 @@
 }
 
 .metadata-collapse-btn:hover { background: var(--pm-bg-hover); }
-.metadata-collapse-btn svg { transition: transform 0.3s ease; }
-.metadata-sidebar.collapsed .metadata-collapse-btn svg { transform: rotate(180deg); }
+.metadata-collapse-btn svg { 
+  transition: transform 0.3s ease; 
+  transform: rotate(180deg); /* Point right when sidebar is open */
+}
+.metadata-sidebar.collapsed .metadata-collapse-btn svg { 
+  transform: rotate(0deg); /* Point left when sidebar is collapsed */
+}
+
+/* Mobile: adjust button on smaller screens but keep visible */
+@media (max-width: 480px) {
+  .metadata-collapse-btn {
+    width: 24px;
+    height: 60px;
+    left: -28px;
+  }
+}
 
 /* ── Tag Chips ───────────────────────────────────── */
 .tag-chip {