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:
@@ -22,6 +22,7 @@
|
||||
<h1 class="app-wordmark"><img src="/wordmark-on-dark.svg" alt="muxplex" height="24" /></h1>
|
||||
<div class="header-actions">
|
||||
<button id="new-session-btn" class="header-btn" aria-label="New session">+</button>
|
||||
<button id="view-mode-btn" class="header-btn" aria-label="Toggle view mode" title="View: auto">▦</button>
|
||||
<button id="settings-btn" class="header-btn" aria-label="Settings">⚙</button>
|
||||
<span id="connection-status"></span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user