fix: set thumb width to 10vmin to fix thumb align and shift

2 files changed, 12 insertions, 1 deletions

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index 849759e..e20e9ec 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -106,7 +106,7 @@ function createLightGallery%s() {
             isMobile: () => false,
 			slideDelay: 0,
 			plugins: [lgZoom, lgThumbnail],
-			thumbWidth: 160,
+			thumbWidth: calculateVmin(10),
 			thumbHeight: "10vmin",
 			thumbMargin: 4
         });
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 5918956..cd19bd0 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -98,6 +98,17 @@
             }
         });
 
+        function calculateVmin(percent) {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+
+            const smallerDimension = Math.min(viewportWidth, viewportHeight);
+
+            const vminValue = (smallerDimension / 100) * percent;
+
+            return vminValue;
+        }
+
         function calculateVmax(percent) {
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;