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:
Brian Krabach
2026-03-31 07:47:54 -07:00
parent 9762098a00
commit b450cf7176
4 changed files with 107 additions and 76 deletions
+9
View File
@@ -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: