refactor: fit view — pure CSS layout, no DOM measurement in applyFitLayout
Root cause of repeated fit view failures: applyFitLayout() measured
clientHeight/clientWidth/getComputedStyle and set inline tile heights. This
failed in multiple ways:
- clientHeight = 0 when container is display:none (returning from session)
- inline tile.style.height destroyed every 2s by innerHTML rebuild in pollSessions
- getComputedStyle forces style recalc with potentially stale values
- rAF wrappers couldn't reliably fix timing issues
Fix: pure arithmetic applyFitLayout — no DOM measurement, no inline heights.
The grid already has a definite height from CSS (flex:1 inside height:100dvh).
grid-template-rows: repeat(rows, 1fr) divides that space without JS measurement.
CSS changes:
- .session-grid--fit { align-content: stretch }
- .session-grid--fit .session-tile { height: auto } — CSS grid cell controls sizing
JS changes:
- applyFitLayout() removes all clientHeight/clientWidth/getComputedStyle/style.height
- applyFitLayout() is now pure arithmetic: count tiles, compute cols×rows, set 1fr templates
- Removed rAF wrappers from all call sites (renderGrid, closeSession, resize handler,
applyDisplaySettings) — safe to call synchronously since no layout measurement needed
- applyDisplaySettings() no longer clears tile heights (never set them anymore)
Tests updated:
- Added test_fit_view_session_tile_has_height_auto (CSS)
- Added 'applyFitLayout does NOT measure DOM dimensions' (JS)
- Updated 'applyFitLayout clears stale...' → 'sets gridTemplateColumns/Rows via arithmetic'
- Updated rAF-wrapper test to match new direct-call behavior
This commit is contained in:
@@ -1380,6 +1380,15 @@ body {
|
||||
/* Fit view — tiles fill viewport, no scroll */
|
||||
.session-grid--fit {
|
||||
overflow: hidden;
|
||||
align-content: stretch; /* let 1fr rows fill container height */
|
||||
}
|
||||
|
||||
/* In fit mode, tiles must use height:auto so the CSS grid 1fr rows control sizing.
|
||||
The base .session-tile uses var(--tile-height) which is a fixed pixel value —
|
||||
overriding with height:auto lets the grid cell (from grid-template-rows: repeat(n,1fr))
|
||||
determine the tile height instead. JS sets only grid-template-columns/rows, not inline heights. */
|
||||
.session-grid--fit .session-tile {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* In fit mode, tile body and pre use the base CSS:
|
||||
|
||||
Reference in New Issue
Block a user