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>
This commit is contained in:
2026-03-21 01:08:25 +00:00
parent 520728c62b
commit 878b32f9e5
3 changed files with 35 additions and 3 deletions

View File

@@ -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>