diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js index e693798..7c08a9c 100644 --- a/muxplex/frontend/app.js +++ b/muxplex/frontend/app.js @@ -1103,6 +1103,13 @@ function saveDisplaySettings(settings) { * @param {Element} grid - The session grid element */ function applyFitLayout(grid) { + // Clear stale layout from previous calls (prevents interference on page reload and + // when returning from a session where the grid was display:none during measurement) + grid.style.removeProperty('grid-template-rows'); + grid.querySelectorAll('.session-tile').forEach(function(t) { + t.style.removeProperty('height'); + }); + var count = grid.querySelectorAll('.session-tile').length; if (count === 0) return; diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css index ca9c3f0..57cf1b8 100644 --- a/muxplex/frontend/style.css +++ b/muxplex/frontend/style.css @@ -1382,19 +1382,12 @@ body { overflow: hidden; } -/* In fit mode, tile body uses flex to anchor content at the bottom (like a real terminal) */ -.session-grid--fit .tile-body { - display: flex; - flex-direction: column; - justify-content: flex-end; /* content anchored to bottom */ -} - -/* In fit mode, pre participates in flex layout (not absolute-positioned) */ -.session-grid--fit .tile-body pre { - position: static; /* remove absolute positioning — flex layout controls position */ - max-height: 100%; /* don't overflow the tile body */ - overflow: hidden; /* clip excess content at the top */ -} +/* In fit mode, tile body and pre use the base CSS: + .tile-body { position: relative; overflow: hidden; } + .tile-body pre { position: absolute; bottom: 0; left: 0; right: 0; } + The pre's natural height from 80 lines of content exceeds the tile height, so it + overflows from bottom:0 upward, and tile-body clips excess at the top — showing + the bottom-most content (the prompt area) just like a real terminal. */ /* ============================================================ Responsive overlay sidebar at <960px diff --git a/muxplex/frontend/tests/test_app.mjs b/muxplex/frontend/tests/test_app.mjs index 514a401..c83fab2 100644 --- a/muxplex/frontend/tests/test_app.mjs +++ b/muxplex/frontend/tests/test_app.mjs @@ -2234,17 +2234,70 @@ test('buildTileHTML shows up to 80 lines in fit mode', () => { ); }); -test('CSS style.css uses flex layout (not scrollbar hack) for fit mode content anchoring', () => { +test('CSS style.css uses base position:absolute bottom:0 for fit mode content anchoring (no flex override)', () => { const source = fs.readFileSync(new URL('../style.css', import.meta.url), 'utf8'); - // New approach: flex + justify-content:flex-end anchors content to bottom without JS scrollTop hacks + // Reverted approach: base CSS position:absolute + bottom:0 anchors content to bottom. + // The flex + justify-content:flex-end approach failed because
filled 100% of parent,
+ // making flex-end a no-op (content started at top, excess clipped at bottom).
+ // The fit-mode tile-body flex override must be REMOVED.
assert.ok(
- source.includes('.session-grid--fit .tile-body'),
- 'style.css must have .session-grid--fit .tile-body rule for flex layout'
+ !source.includes('.session-grid--fit .tile-body {'),
+ 'style.css must NOT have .session-grid--fit .tile-body flex override — base position:absolute handles anchoring'
);
+ // The pre static-positioning override must also be removed
assert.ok(
- source.includes('justify-content: flex-end') || source.includes('justify-content:flex-end'),
- 'style.css must use justify-content: flex-end to anchor fit mode content at bottom'
+ !source.includes('.session-grid--fit .tile-body pre {'),
+ 'style.css must NOT have .session-grid--fit .tile-body pre override — base position:absolute + bottom:0 is correct'
+ );
+ // Base .tile-body pre must still use position:absolute + bottom:0
+ assert.ok(
+ source.includes('position: absolute') && source.includes('bottom: 0'),
+ 'base .tile-body pre must retain position:absolute and bottom:0 for content anchoring'
);
- // Old scrollbar-hiding hack is no longer needed with flex approach
- // (scrollbar-width: none was only needed when overflow-y:scroll was used for scrollTop positioning)
+});
+
+// --- Fit view Bug 1: applyFitLayout clears stale layout before recalculating ---
+
+test('applyFitLayout clears stale grid-template-rows and tile heights before recalculating', () => {
+ const removedGridProps = [];
+ const removedTileProps = [];
+
+ const mockTile = {
+ style: { removeProperty: (prop) => removedTileProps.push(prop) },
+ };
+
+ const mockGrid = {
+ style: {
+ removeProperty: (prop) => removedGridProps.push(prop),
+ gridTemplateColumns: '',
+ gridTemplateRows: 'repeat(2, 1fr)', // stale value from previous call
+ },
+ querySelectorAll: (sel) => {
+ if (sel === '.session-tile') return [mockTile];
+ return [];
+ },
+ clientWidth: 800,
+ parentElement: { clientHeight: 600 },
+ };
+
+ const origGetComputedStyle = globalThis.getComputedStyle;
+ globalThis.getComputedStyle = () => ({
+ paddingTop: '16px', paddingBottom: '16px',
+ paddingLeft: '16px', paddingRight: '16px',
+ gap: '8px',
+ });
+
+ app.applyFitLayout(mockGrid);
+
+ assert.ok(
+ removedGridProps.includes('grid-template-rows'),
+ 'applyFitLayout must removeProperty("grid-template-rows") before recalculating to prevent stale layout interference'
+ );
+ assert.ok(
+ removedTileProps.includes('height'),
+ 'applyFitLayout must removeProperty("height") from each tile before recalculating'
+ );
+
+ if (origGetComputedStyle) globalThis.getComputedStyle = origGetComputedStyle;
+ else delete globalThis.getComputedStyle;
});
diff --git a/muxplex/tests/test_frontend_css.py b/muxplex/tests/test_frontend_css.py
index 1ab7158..78164e9 100644
--- a/muxplex/tests/test_frontend_css.py
+++ b/muxplex/tests/test_frontend_css.py
@@ -1744,41 +1744,35 @@ def test_view_uses_dvh_fallback() -> None:
)
-def test_fit_view_tile_body_uses_flex_end() -> None:
- """Fit mode tile-body must use flex + justify-content: flex-end for bottom anchoring.
+def test_fit_view_no_tile_body_flex_override() -> None:
+ """Bug fix: .session-grid--fit .tile-body must NOT have a flex override.
- Bug: .tile-body pre had position:absolute + scrollTop=scrollHeight hack.
- The scrollTop hack resets every 2s when innerHTML is rebuilt by the poll cycle,
- and has no effect when content doesn't overflow.
- Fix: make tile-body a flex container with justify-content:flex-end so the pre
- naturally anchors to the bottom without JS.
+ The flex + justify-content:flex-end approach failed because the with
+ max-height:100% fills the parent entirely, making flex-end a no-op. Content
+ started at the top and excess was clipped at the bottom — the opposite of what
+ we want.
+
+ Fix: delete the .session-grid--fit .tile-body rule entirely. The base CSS
+ position:absolute + bottom:0 on the anchors content to the bottom.
"""
css = read_css()
- assert ".session-grid--fit .tile-body" in css, (
- "Missing .session-grid--fit .tile-body rule — needed for flex-end bottom anchoring"
- )
- block = _extract_rule_block(css, ".session-grid--fit .tile-body {")
- assert "display: flex" in block or "display:flex" in block, (
- ".session-grid--fit .tile-body must use display: flex"
- )
- assert "justify-content: flex-end" in block or "justify-content:flex-end" in block, (
- ".session-grid--fit .tile-body must use justify-content: flex-end to anchor content to bottom"
+ assert ".session-grid--fit .tile-body {" not in css, (
+ ".session-grid--fit .tile-body must be removed — flex-end approach does not work "
+ "when fills 100% of the parent. Use base position:absolute + bottom:0."
)
-def test_fit_view_pre_is_static() -> None:
- """Fit mode pre must use position:static (not absolute) for flex layout.
+def test_fit_view_no_pre_static_override() -> None:
+ """Bug fix: .session-grid--fit .tile-body pre must NOT override position to static.
- Bug: .tile-body pre uses position:absolute which takes it out of flex flow.
- In fit mode, we need position:static so flex layout controls the pre's position.
- The parent .tile-body is a flex column with justify-content:flex-end, so the
- pre will naturally sit at the bottom.
+ The position:static override removed the pre from absolute positioning, breaking
+ the bottom anchoring. Base CSS already has position:absolute + bottom:0 which
+ anchors content to the bottom of the tile.
+
+ Fix: delete the .session-grid--fit .tile-body pre rule entirely.
"""
css = read_css()
- assert ".session-grid--fit .tile-body pre" in css, (
- "Missing .session-grid--fit .tile-body pre rule"
- )
- block = _extract_rule_block(css, ".session-grid--fit .tile-body pre {")
- assert "position: static" in block or "position:static" in block, (
- ".session-grid--fit .tile-body pre must have position: static to participate in flex layout"
+ assert ".session-grid--fit .tile-body pre {" not in css, (
+ ".session-grid--fit .tile-body pre override must be removed — revert to base "
+ "position:absolute + bottom:0 for correct bottom anchoring."
)