From 50007a6d2a5105a640e1e7ba1be67f219e25955d Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Fri, 27 Mar 2026 15:17:07 -0700
Subject: [PATCH] fix: anchor tile preview to bottom so newest terminal content
 is visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the <pre> snapshot floated to the top of .tile-body — when
content overflowed, the oldest lines showed and newest were clipped.
Now .tile-body pre is position:absolute;bottom:0 so overflow clips
from the top and the lower-left corner (newest content) is always shown.
---
 frontend/style.css          |  7 +++++++
 frontend/tests/test_app.mjs | 10 ++++++++++
 2 files changed, 17 insertions(+)

diff --git a/frontend/style.css b/frontend/style.css
index 26c77dd..771be58 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -214,6 +214,13 @@ body {
   position: relative;
 }
 
+.tile-body pre {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 .tile-pre {
   position: absolute;
   inset: 0;
diff --git a/frontend/tests/test_app.mjs b/frontend/tests/test_app.mjs
index 73412d9..4bb8c06 100644
--- a/frontend/tests/test_app.mjs
+++ b/frontend/tests/test_app.mjs
@@ -416,6 +416,16 @@ test('buildTileHTML adds tier class on mobile', () => {
   assert.ok(html.includes('session-tile--tier-'), 'should contain tier class on mobile');
 });
 
+test('buildTileHTML wraps snapshot in .tile-body with <pre> as direct child', () => {
+  const session = { name: 'my-session', snapshot: 'line1\nline2' };
+  const html = app.buildTileHTML(session, 0, false);
+  assert.ok(html.includes('class="tile-body"'), 'should contain .tile-body wrapper');
+  assert.ok(
+    /<div class="tile-body"><pre>/.test(html),
+    '<pre> should be a direct child of .tile-body',
+  );
+});
+
 // --- renderGrid ---
 
 test('renderGrid clears grid and shows empty-state when sessions array is empty', () => {