From faed2f8296ad17040193aafce4ee13a3ba03d56e Mon Sep 17 00:00:00 2001 From: mikael-lovqvists-claude-agent Date: Sat, 21 Mar 2026 01:15:05 +0000 Subject: [PATCH] Fix grid viewer zoom: use CSS zoom so images and text scale together Cells stay 1fr (always fill width), CSS zoom shrinks the whole grid uniformly. No overflow. Co-Authored-By: Claude Sonnet 4.6 --- public/app.mjs | 11 ++++------- public/style.css | 3 +-- public/templates.html | 2 +- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/public/app.mjs b/public/app.mjs index 955fc65..bd95fa1 100644 --- a/public/app.mjs +++ b/public/app.mjs @@ -1190,16 +1190,13 @@ function render_grid_viewer() { } )); - // Zoom slider const zoom_el = document.getElementById('gv-zoom'); const cells_el = document.getElementById('grid-cells'); + cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, 1fr)`; - function apply_zoom(px) { - cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, ${px}px)`; - } - - zoom_el.addEventListener('input', () => apply_zoom(zoom_el.value)); - apply_zoom(zoom_el.value); + zoom_el.addEventListener('input', () => { + cells_el.style.zoom = zoom_el.value / 100; + }); const all_cells = grid.cells.flat().map((filename, idx) => { const row = Math.floor(idx / grid.cols); diff --git a/public/style.css b/public/style.css index 4995d98..871c199 100644 --- a/public/style.css +++ b/public/style.css @@ -1352,13 +1352,12 @@ nav { } .grid-cells-wrap { - overflow-x: auto; + overflow: hidden; } .grid-cells { display: grid; gap: 4px; - min-width: max-content; } .grid-cell { diff --git a/public/templates.html b/public/templates.html index 2548408..0a84a21 100644 --- a/public/templates.html +++ b/public/templates.html @@ -357,7 +357,7 @@