feat: three dashboard view modes — Auto, Fit, Compact

Auto: current behavior (auto-fill grid, fixed tile height, scrollable).
Fit: calculates cols × rows to fill viewport exactly, zero scroll.
Compact: 80px tiles, high density, auto-fill with 200px min-width.

Toggle button (▦) in overview header cycles modes. Fit recalculates
on window resize. View mode persisted in localStorage alongside other
display settings (viewMode: 'auto' default in DISPLAY_DEFAULTS).

- CSS: .session-grid--fit and .session-grid--compact modifiers
- JS: VIEW_MODES, cycleViewMode(), applyFitLayout() functions
- HTML: #view-mode-btn between + and ⚙ in overview header
- Tests: 8 new JS tests, 3 CSS tests, 1 HTML test all passing
This commit is contained in:
Brian Krabach
2026-03-30 22:22:59 -07:00
parent 3a102ba9d8
commit 8c0675157a
6 changed files with 270 additions and 6 deletions
+18
View File
@@ -1371,6 +1371,24 @@ body {
z-index: 200;
}
/* ============================================================
Dashboard view modes — Compact and Fit
============================================================ */
/* Compact view — small tiles, high density */
.session-grid--compact .session-tile {
height: 80px;
}
.session-grid--compact .tile-body {
height: 40px;
}
/* Fit view — tiles fill viewport, no scroll */
.session-grid--fit {
overflow: hidden;
}
/* ============================================================
Responsive overlay sidebar at <960px
============================================================ */