From 616ca54172eeef11c22f25098cb094e813553790 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 29 Aug 2026 17:08:28 +0000 Subject: [PATCH 1/2] Keep the gallery inside the screen on narrow phones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On a 360px-wide phone the gallery falls to the two-column rule, which asked for `1fr 1fr`. A bare `1fr` track has an automatic minimum of the item's own content width, and a tile's caption holds the uploader name with `white-space: nowrap` — so a long name sized the column instead of being ellipsised, and the grid, the photos and the page with them ran off the side of the screen. A 393px iPhone never hit this: above 380px the grid uses `auto-fill, minmax(140px, 1fr)`, whose minimum is a fixed 140px. Ask for `minmax(0, 1fr)` so the tracks may shrink to the space available, and give the tile `min-width: 0` so a caption can never set the column's floor again wherever the grid is used. Either alone fixes it; together the tile carries its own guarantee. Checked in headless Chromium at 360/384/393/412px against a replica of the gallery: 782px of document on a 360px screen before, 360px after, with the long name now clipped to an ellipsis. --- src/Shoebox.Web/wwwroot/css/site.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/Shoebox.Web/wwwroot/css/site.css b/src/Shoebox.Web/wwwroot/css/site.css index a0e12cb..50624bf 100644 --- a/src/Shoebox.Web/wwwroot/css/site.css +++ b/src/Shoebox.Web/wwwroot/css/site.css @@ -558,6 +558,10 @@ input[type="checkbox"] { accent-color: var(--ink); } .tile { position: relative; margin: 0; + /* A grid item's automatic minimum is its content's minimum width, and the + caption's uploader name never wraps, so a long name would otherwise widen + the whole column past the screen instead of being ellipsised. */ + min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 0; @@ -856,9 +860,12 @@ input[type="checkbox"] { accent-color: var(--ink); } } } -/* very small phones: single-column gallery reads better than cramped pairs */ +/* very small phones (a 360px Android, say): a fixed pair, since auto-fill's + 140px minimum leaves too little room. minmax(0, ...) rather than a bare 1fr, + whose automatic minimum is the tile's content and would push the grid — and + with it the page — wider than the screen. */ @media (max-width: 380px) { - .gallery { grid-template-columns: 1fr 1fr; } + .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { From f615559aca2db628ca2329872ba13f87da7b8270 Mon Sep 17 00:00:00 2001 From: DomDom3333 Date: Sat, 29 Aug 2026 19:21:38 +0200 Subject: [PATCH 2/2] Clean up comments in site.css Removed unnecessary comments in the CSS file to improve readability. --- src/Shoebox.Web/wwwroot/css/site.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/Shoebox.Web/wwwroot/css/site.css b/src/Shoebox.Web/wwwroot/css/site.css index 50624bf..f165b19 100644 --- a/src/Shoebox.Web/wwwroot/css/site.css +++ b/src/Shoebox.Web/wwwroot/css/site.css @@ -558,9 +558,6 @@ input[type="checkbox"] { accent-color: var(--ink); } .tile { position: relative; margin: 0; - /* A grid item's automatic minimum is its content's minimum width, and the - caption's uploader name never wraps, so a long name would otherwise widen - the whole column past the screen instead of being ellipsised. */ min-width: 0; background: var(--paper); border: 1px solid var(--line); @@ -860,10 +857,6 @@ input[type="checkbox"] { accent-color: var(--ink); } } } -/* very small phones (a 360px Android, say): a fixed pair, since auto-fill's - 140px minimum leaves too little room. minmax(0, ...) rather than a bare 1fr, - whose automatic minimum is the tile's content and would push the grid — and - with it the page — wider than the screen. */ @media (max-width: 380px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }