WallyHackenslacker/NibasaViewer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Wally Hackenslacker
2026-03-23 23:20:57 -04:00
parent d42de13d4e
commit caf8130c93
1 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
viewer/static/css/styles.css
View File

@@ -176,10 +176,13 @@ body {
.gallery-grid { .gallery-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(128px, 128px)); /* Create as many fixed 128px columns as will fit and center them.
justify-content: space-between; `auto-fit` ensures the grid creates as many columns as possible
column-gap: 24px; while keeping each column exactly 128px. Use `justify-content:
row-gap: 24px; 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; padding-bottom: 8px;
} }
@@ -388,21 +391,13 @@ body.theme-dark .small.text-muted {
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.gallery-grid { /* On narrow viewports keep the fixed 128px thumbnails but allow the
grid-template-columns: 1fr; grid to place as many side-by-side as fit. Reduce breadcrumb max
justify-content: stretch; width to preserve layout. */
}
.thumb-card {
margin-left: auto;
margin-right: auto;
}
.crumb-link { .crumb-link {
max-width: 130px; max-width: 130px;
} }
.crumb-link-full { .crumb-link-full {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;