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:
@@ -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
|
||||
============================================================ */
|
||||
|
||||
Reference in New Issue
Block a user