From caf8130c9367934ffcd24eb38739b801032def4c Mon Sep 17 00:00:00 2001
From: Wally Hackenslacker <mastor89@protonmail.com>
Date: Mon, 23 Mar 2026 23:20:57 -0400
Subject: [PATCH] gallery: allow multiple fixed 128px thumbnails per row on
 small screens

---
 viewer/static/css/styles.css | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/viewer/static/css/styles.css b/viewer/static/css/styles.css
index 3d82d13..491f86f 100644
--- a/viewer/static/css/styles.css
+++ b/viewer/static/css/styles.css
@@ -176,10 +176,13 @@ body {
 
 .gallery-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(128px, 128px));
-    justify-content: space-between;
-    column-gap: 24px;
-    row-gap: 24px;
+    /* Create as many fixed 128px columns as will fit and center them.
+       `auto-fit` ensures the grid creates as many columns as possible
+       while keeping each column exactly 128px. Use `justify-content:
+       center` so the columns are centered on wider containers. */
+    grid-template-columns: repeat(auto-fit, 128px);
+    justify-content: center;
+    gap: 24px; /* shorthand for row/column gaps */
     padding-bottom: 8px;
 }
 
@@ -388,21 +391,13 @@ body.theme-dark .small.text-muted {
 }
 
 @media (max-width: 575.98px) {
-    .gallery-grid {
-        grid-template-columns: 1fr;
-        justify-content: stretch;
-    }
-
-    .thumb-card {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
+    /* On narrow viewports keep the fixed 128px thumbnails but allow the
+       grid to place as many side-by-side as fit. Reduce breadcrumb max
+       width to preserve layout. */
     .crumb-link {
         max-width: 130px;
     }
 
-
     .crumb-link-full {
         overflow: hidden;
         text-overflow: ellipsis;