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 <noreply@anthropic.com>

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);

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 {

public/templates.html

@@ -357,7 +357,7 @@
 			<div class="grid-viewer-actions">
 				<label class="gv-zoom-label">
 					<span>Size</span>
-					<input type="range" id="gv-zoom" min="40" max="300" value="120" step="10">
+					<input type="range" id="gv-zoom" min="20" max="100" value="100" step="5">
 				</label>
 				<button class="btn btn-secondary" id="gv-back">← Back</button>
 				<button class="btn btn-secondary" id="gv-edit-panels">Edit panels</button>