gallery: allow multiple fixed 128px thumbnails per row on small screens

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;