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

Fix grid viewer zoom: fixed cell px size + overflow-x scroll

Browse Source 
Cells are sized in CSS px to fit at load time. Browser zoom now scales
everything uniformly; grid scrolls horizontally instead of reflowing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-03-21 01:22:55 +00:00
parent 754f8504f1
commit b9ba6d38b5
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app.mjs
View File

@@ -1191,7 +1191,10 @@ function render_grid_viewer() {
)); ));
const cells_el = document.getElementById('grid-cells'); const cells_el = document.getElementById('grid-cells');
cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, 1fr)`; const gap = 4;
const available = cells_el.parentElement.clientWidth;
const cell_px = Math.floor((available - gap * (grid.cols - 1)) / grid.cols);
cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, ${cell_px}px)`;
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);

4
public/style.css
View File

@@ -1338,6 +1338,10 @@ nav {
} }
.grid-viewer {
overflow-x: auto;
}
.grid-cells { .grid-cells {
display: grid; display: grid;
gap: 4px; gap: 4px;