mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix grid viewer zoom: use CSS zoom so images and text scale together

Browse Source 
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>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-03-21 01:15:05 +00:00
parent 878b32f9e5
commit faed2f8296
3 changed files with 6 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/app.mjs
View File

@@ -1190,16 +1190,13 @@ function render_grid_viewer() {
} }
)); ));
// Zoom slider
const zoom_el = document.getElementById('gv-zoom'); const zoom_el = document.getElementById('gv-zoom');
const cells_el = document.getElementById('grid-cells'); const cells_el = document.getElementById('grid-cells');
cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, 1fr)`;
function apply_zoom(px) { zoom_el.addEventListener('input', () => {
cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, ${px}px)`; cells_el.style.zoom = zoom_el.value / 100;
} });
zoom_el.addEventListener('input', () => apply_zoom(zoom_el.value));
apply_zoom(zoom_el.value);
const all_cells = grid.cells.flat().map((filename, idx) => { const all_cells = grid.cells.flat().map((filename, idx) => {
const row = Math.floor(idx / grid.cols); const row = Math.floor(idx / grid.cols);

3
public/style.css
View File

@@ -1352,13 +1352,12 @@ nav {
} }
.grid-cells-wrap { .grid-cells-wrap {
overflow-x: auto; overflow: hidden;
} }
.grid-cells { .grid-cells {
display: grid; display: grid;
gap: 4px; gap: 4px;
min-width: max-content;
} }
.grid-cell { .grid-cell {

2
public/templates.html
View File

@@ -357,7 +357,7 @@
<div class="grid-viewer-actions"> <div class="grid-viewer-actions">
<label class="gv-zoom-label"> <label class="gv-zoom-label">
<span>Size</span> <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> </label>
<button class="btn btn-secondary" id="gv-back">← Back</button> <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-secondary" id="gv-edit-panels">Edit panels</button>