From d9dcea0e41e08c7fce550fb8caf1979c729263f8 Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Fri, 15 Aug 2025 09:03:28 +0300
Subject: [PATCH] Add dynamic photoswipe padding

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 assets/js/main.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index aabbdfe..76b09d1 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,8 +1,6 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import Masonry from "masonry-layout";
 
-const lightboxCaptionHeight = 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-
 const lightbox = new PhotoSwipeLightbox({
   gallery: ".lightbox",
   children: ".pswp-image",
@@ -10,12 +8,16 @@ const lightbox = new PhotoSwipeLightbox({
   hideAnimationDuration: 300,
   initialZoomLevel: "fit",
   pswpModule: () => import("photoswipe"),
-  padding: {
-    top: lightboxCaptionHeight,
-    bottom: lightboxCaptionHeight,
-    left: 0,
-    right: 0,
-  }
+  paddingFn: () => {
+    const captionHeight =
+      5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return {
+      top: captionHeight,
+      bottom: captionHeight,
+      left: 0,
+      right: 0,
+    };
+  },
 });
 
 lightbox.on("uiRegister", function () {