From 43f74babc089f560670b0c7af99e929e5ea957a5 Mon Sep 17 00:00:00 2001
From: lenafx <jaiet7@gmail.com>
Date: Tue, 25 Nov 2025 19:08:15 +0100
Subject: [PATCH] fixed UI on images when resizing the window.

---
 src/content/image-handler.js | 42 +++++++++++-------------------------
 src/renderer.js              |  2 +-
 2 files changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/content/image-handler.js b/src/content/image-handler.js
index 7bdbe41..515f126 100644
--- a/src/content/image-handler.js
+++ b/src/content/image-handler.js
@@ -1,3 +1,14 @@
+const gallery = document.getElementById('content-gallery');
+
+if (gallery) {
+    const ro = new ResizeObserver(() => {
+        const items = gallery.querySelectorAll('.image-entry[data-type="image"]');
+        items.forEach(item => resizeMasonryItem(item));
+        relayoutMasonry(gallery);
+    });
+    ro.observe(gallery);
+}
+
 let masonryFrameRunning = false;
 function scheduleMasonryRelayout(grid) {
     if (masonryFrameRunning) return;
@@ -9,11 +20,6 @@ function scheduleMasonryRelayout(grid) {
     });
 }
 
-export function triggerMasonryRelayout(gallery) {
-    if (!gallery) return;
-    setTimeout(() => relayoutMasonry(gallery), 350);
-}
-
 export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
     const {
         showMessage,
@@ -175,17 +181,6 @@ function updateHeartIcon(btn, isFavorited) {
     btn.title = isFavorited ? "Remove from Favorites" : "Add to Favorites";
 }
 
-
-function getSidebarClosedWidth() {
-    const s = document.querySelector('.sidebar');
-    if (!s) return 0;
-
-    return parseFloat(
-        getComputedStyle(document.documentElement)
-            .getPropertyValue('--sidebar-width-collapsed')
-    );
-}
-
 function resizeMasonryItem(item) {
     if (item.dataset.type === 'book') return;
 
@@ -194,30 +189,19 @@ function resizeMasonryItem(item) {
     const img = item.querySelector("img");
     if (!img || !img.complete || img.naturalWidth === 0) return;
 
-    const gridCurrent = grid.getBoundingClientRect().width;
-    const sidebar = document.querySelector(".sidebar");
-    const sidebarExpanded = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width-expanded"));
-    const sidebarCollapsed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width-collapsed"));
-
-    const gridClosedWidth = gridCurrent - (sidebarExpanded - sidebarCollapsed);
-
-    const currentItemWidth = item.getBoundingClientRect().width;
-    const simulatedWidth = (currentItemWidth / gridCurrent) * gridClosedWidth;
+    const simulatedWidth = item.getBoundingClientRect().width;
 
     const gridStyles = getComputedStyle(grid);
     const rowHeight = parseInt(gridStyles.gridAutoRows);
     const rowGap = parseInt(gridStyles.gap);
 
-    const imageHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
-    const totalHeight = imageHeight;
+    const totalHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
     const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
 
     item.style.gridRowEnd = `span ${rowSpan}`;
     item.style.height = "auto";
 }
 
-
-
 function relayoutMasonry(grid) {
     if (!grid) return;
     const items = grid.querySelectorAll('.image-entry[data-type="image"]');
diff --git a/src/renderer.js b/src/renderer.js
index 05cd6ce..a1278f6 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -2,7 +2,7 @@ import { populateSources } from './extensions/load-extensions.js';
 import { setupGlobalKeybinds } from './utils/keybinds.js';
 import { getDomElements } from './utils/dom-loader.js';
 import { performSearch, loadMoreResults } from './modules/search-handler.js';
-import { createImageCard, createBookCard, populateTagModal, triggerMasonryRelayout } from './content/image-handler.js';
+import { createImageCard, createBookCard, populateTagModal } from './content/image-handler.js';
 import { showMessage as uiShowMessage } from './modules/ui-utils.js';
 import { applyLayoutToGallery } from './modules/layout-manager.js';