fix: minimize chance of masonry getting broken

2 files changed, 24 insertions, 6 deletions

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index deafb4d..7022793 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -133,7 +133,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		}
 
 		w.WriteString(fmt.Sprintf(`
-<div class="justify-content-center display-block m-1">
+<div class="justify-content-center display-block">
 	<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-sizer grid-sizer-%s"></div>
@@ -156,7 +156,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(), 300);
+		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 100);
 	}
 
 	imgLoad_%s.on('progress', initMasonryLayout_%s);
diff --git a/static/input.css b/static/input.css
index 836d840..4fcadd1 100644
--- a/static/input.css
+++ b/static/input.css
@@ -445,12 +445,18 @@ a:hover, .linklike:hover {
     border-color: transparent transparent var(--background-dark-color) transparent;
 }
 
-.grid-item, .grid-sizer {
+.grid-item {
     position: relative;
     display: inline-block;
     width: 10rem;
 }
 
+.grid-sizer {
+    position: relative;
+    display: inline-block;
+    width: 10.1rem;
+}
+
 .grid-item-index {
     visibility: visible;
     opacity: 1;
@@ -475,30 +481,42 @@ a:hover, .linklike:hover {
 }
 
 @container main (width >= 40rem) {
-    .grid-item, .grid-sizer {
+    .grid-item {
         width: 12rem;
     }
 
+    .grid-sizer {
+        width: 12.1rem;
+    }
+
     .grid-item-2x {
         width: 24rem;
     }
 }
 
 @container main (width >= 76rem) {
-    .grid-item, .grid-sizer {
+    .grid-item {
         width: 18rem;
     }
 
+    .grid-sizer {
+        width: 18.1rem;
+    }
+
     .grid-item-2x {
         width: 36rem;
     }
 }
 
 @container main (width >= 128rem) {
-    .grid-item, .grid-sizer {
+    .grid-item {
         width: 24rem;
     }
 
+    .grid-sizer {
+        width: 24.1rem;
+    }
+
     .grid-item-2x {
         width: 48rem;
     }