From c52a07e3fa738135eaa5272d9f115e4740b60c61 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Tue, 4 Nov 2025 13:23:33 +0300
Subject: fix: correctly pack galleries on mobiles feat: switch masonry to
 packery debug: log app shutdown more

---
 internal/glightbox/html_renderer.go | 11 +++++------
 internal/router/router.go           |  5 +++++
 static/input.css                    | 16 ++++------------
 views/layouts/general-page.html     | 36 +++++++++++++++++++++++++++++++++++-
 4 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 7022793..b7b256a 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -133,9 +133,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		}
 
 		w.WriteString(fmt.Sprintf(`
-<div class="justify-content-center display-block">
+<div class="items-center flex flex-col">
 	<hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-	<div class="grid masonry-grid-%s mx-auto">
+	<div class="grid masonry-grid-%s">
 		<div class="grid-sizer grid-sizer-%s"></div>
 		%s
 	</div>
@@ -144,11 +144,10 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 
 		w.WriteString(fmt.Sprintf(`
 <script>
-	var msnry_%s = new Masonry('.masonry-grid-%s', {
+	var pckry_%s = new Packery('.masonry-grid-%s', {
 		itemSelector: '.grid-item-%s',
 		columnWidth: '.grid-sizer-%s',
-		percentPosition: false,
-		fitWidth: true
+		percentPosition: false
 	});
 
 	var imgLoad_%s_timer;
@@ -156,7 +155,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 
 	function initMasonryLayout_%s(tm) {
 		clearTimeout(imgLoad_%s_timer);
-		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 100);
+		imgLoad_%s_timer = setTimeout(() => pckry_%s.layout(), 100);
 	}
 
 	imgLoad_%s.on('progress', initMasonryLayout_%s);
diff --git a/internal/router/router.go b/internal/router/router.go
index ef3f063..c0556f0 100644
--- a/internal/router/router.go
+++ b/internal/router/router.go
@@ -340,18 +340,23 @@ func (r *Router) Listen(endpoint string) error {
 
 func (r *Router) Close() (err error) {
 	allErrors := make([]error, 0)
+	slog.Debug("shutting down blog trigger scheduler")
 	if err = r.supplements.BlogTrigger.Close(); err != nil {
 		allErrors = append(allErrors, fmt.Errorf("fail to shutdown blog trigger scheduler: %w", err))
 	}
+	slog.Debug("shutting down fiber server")
 	if err = r.app.Shutdown(); err != nil {
 		allErrors = append(allErrors, fmt.Errorf("fail to shutdown fiber server: %w", err))
 	}
+	slog.Debug("dumping cache")
 	if err = r.supplements.ClientCache.Close(); err != nil {
 		allErrors = append(allErrors, fmt.Errorf("fail to dump cache: %w", err))
 	}
+	slog.Debug("closing db connection")
 	if err = r.supplements.DB.Close(); err != nil {
 		allErrors = append(allErrors, fmt.Errorf("fail to close db connection: %w", err))
 	}
+	slog.Debug("closing page cache")
 	r.supplements.PageCache.Close()
 	return errors.Join(allErrors...)
 }
diff --git a/static/input.css b/static/input.css
index 739caa3..8b69162 100644
--- a/static/input.css
+++ b/static/input.css
@@ -468,15 +468,11 @@ form.crossable.htmx-request input {
 }
 
 .grid-item {
-    position: relative;
-    display: inline-block;
     width: 10rem;
 }
 
 .grid-sizer {
-    position: relative;
-    display: inline-block;
-    width: 10.1rem;
+    width: 10.5rem;
 }
 
 .grid-item-index {
@@ -508,7 +504,7 @@ form.crossable.htmx-request input {
     }
 
     .grid-sizer {
-        width: 12.1rem;
+        width: 12.5rem;
     }
 
     .grid-item-2x {
@@ -517,14 +513,10 @@ form.crossable.htmx-request input {
 }
 
 @container main (width >= 76rem) {
-    .grid-item {
+    .grid-item, .grid-sizer {
         width: 18rem;
     }
 
-    .grid-sizer {
-        width: 18.1rem;
-    }
-
     .grid-item-2x {
         width: 36rem;
     }
@@ -536,7 +528,7 @@ form.crossable.htmx-request input {
     }
 
     .grid-sizer {
-        width: 24.1rem;
+        width: 24.5rem;
     }
 
     .grid-item-2x {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 62360ad..5c1867a 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -137,6 +137,7 @@
                         document.body.append(frame);
                     }
                     break;
+                case "lilac": break;
             }
         }
 
@@ -267,7 +268,40 @@
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script>
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/packery/3.0.0/dist/packery.pkgd.js"></script>
+
+    <script>
+        // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
+        var __resetLayout = Packery.prototype._resetLayout;
+        Packery.prototype._resetLayout = function() {
+            __resetLayout.call( this );
+            var parentSize = getSize( this.element.parentNode );
+            var colW = this.columnWidth + this.gutter;
+            this.fitWidth = Math.floor( ( ( parentSize.innerWidth + this.gutter ) / colW ) * 1.01 ) * colW;
+            this.packer.width = this.fitWidth;
+            this.packer.height = Number.POSITIVE_INFINITY;
+            this.packer.reset();
+        };
+
+        Packery.prototype._getContainerSize = function() {
+            var emptyWidth = 0;
+            for ( var i=0, len = this.packer.spaces.length; i < len; i++ ) {
+                var space = this.packer.spaces[i];
+                if ( space.y === 0 && space.height === Number.POSITIVE_INFINITY ) {
+                    emptyWidth += space.width;
+                }
+            }
+
+            return {
+                width: this.fitWidth - this.gutter - emptyWidth,
+                height: this.maxY - this.gutter
+            };
+        };
+
+        Packery.prototype.needsResizeLayout = function() {
+            return true;
+        };
+    </script>
 
     <div id="general-page-bottom-embeds" class="flex"
         hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
-- 
cgit v1.3.1+13