From ee080b8f1559fc88670ece1735f8cc08f9fa374d Mon Sep 17 00:00:00 2001 From: mikael-lovqvists-claude-agent Date: Sat, 21 Mar 2026 01:17:53 +0000 Subject: [PATCH] Fix grid viewer: overlay label on image so zoom doesn't shrink images Label is now absolutely positioned at the bottom of the cell with a gradient background. Cell is square via aspect-ratio, nothing outside it. Co-Authored-By: Claude Sonnet 4.6 --- public/style.css | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/public/style.css b/public/style.css index cab28b4..9c58276 100644 --- a/public/style.css +++ b/public/style.css @@ -1344,17 +1344,16 @@ nav { } .grid-cell { - display: flex; - flex-direction: column; - gap: 2px; -} - -.grid-cell-img-wrap { position: relative; width: 100%; aspect-ratio: 1; } +.grid-cell-img-wrap { + position: absolute; + inset: 0; +} + .grid-cell-img { width: 100%; height: 100%; @@ -1398,10 +1397,18 @@ nav { } .grid-cell-label { + position: absolute; + bottom: 0; + left: 0; + right: 0; font-size: 0.65rem; - color: var(--text-faint); + color: #fff; text-align: center; font-family: var(--font-mono); + background: linear-gradient(transparent, rgba(0,0,0,0.55)); + border-radius: 0 0 3px 3px; + padding: 6px 2px 2px; + pointer-events: none; } /* ===== GRID TYPE PILL ===== */