Add zoom/cell-size slider to grid viewer

Images and labels scale together with a range slider (40–300px).
Grid scrolls horizontally when cells exceed viewport width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/app.mjs

@@ -1190,9 +1190,16 @@ function render_grid_viewer() {
 		}
 	));
 
-	// Build cell grid
+	// 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);
 
 	const all_cells = grid.cells.flat().map((filename, idx) => {
 		const row = Math.floor(idx / grid.cols);

public/style.css

@@ -1333,13 +1333,32 @@ nav {
 
 .grid-viewer-actions {
 	display: flex;
+	align-items: center;
 	gap: 0.5rem;
 	flex-shrink: 0;
 }
 
+.gv-zoom-label {
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	font-size: 0.8rem;
+	color: var(--text-dim);
+}
+
+.gv-zoom-label input[type=range] {
+	width: 100px;
+	accent-color: var(--accent);
+}
+
+.grid-cells-wrap {
+	overflow-x: auto;
+}
+
 .grid-cells {
 	display: grid;
 	gap: 4px;
+	min-width: max-content;
 }
 
 .grid-cell {

public/templates.html

@@ -355,12 +355,18 @@
 				<div class="viewer-meta"></div>
 			</div>
 			<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">
+				</label>
 				<button class="btn btn-secondary" id="gv-back">← Back</button>
 				<button class="btn btn-secondary" id="gv-edit-panels">Edit panels</button>
 				<button class="btn btn-danger" id="gv-delete">Delete</button>
 			</div>
 		</div>
-		<div class="grid-cells" id="grid-cells"></div>
+		<div class="grid-cells-wrap">
+			<div class="grid-cells" id="grid-cells"></div>
+		</div>
 	</div>
 </template>