From ef6343f9ef1f7c5d40c7221980ab88021f5f86db Mon Sep 17 00:00:00 2001
From: Kevin Atlee <kevinatlee@Kevins-MacBook-Air.local>
Date: Sun, 23 Aug 2026 15:54:15 -0700
Subject: [PATCH] Top-align active TV display columns

---
 apps/client/src/components/RoomLobby.test.tsx | 16 ++++++++++++++++
 apps/client/src/components/RoomLobby.tsx      |  4 +++-
 apps/client/src/styles.css                    |  3 +++
 apps/client/src/styles.test.ts                |  9 ++++++++-
 docs/DEVELOPMENT_LOG.md                       |  7 +++++++
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/components/RoomLobby.test.tsx b/apps/client/src/components/RoomLobby.test.tsx
index 45b197d..c5e952f 100644
--- a/apps/client/src/components/RoomLobby.test.tsx
+++ b/apps/client/src/components/RoomLobby.test.tsx
@@ -504,6 +504,10 @@ describe('RoomLobby word entry', () => {
       name: 'Room Highlights',
     });
     const puzzle = screen.getByRole('region', { name: 'Puzzle' });
+    expect(puzzle.parentElement).toHaveClass(
+      'display-room-layout',
+      'display-room-layout--active',
+    );
     const joinQr = screen.getByRole('region', {
       name: 'Scan to join room ABC234',
     });
@@ -540,6 +544,18 @@ describe('RoomLobby word entry', () => {
     expect(within(timer).getByText('59')).toBeVisible();
   });
 
+  it('keeps the lobby display centered without the active layout modifier', () => {
+    renderLobby(undefined, {
+      room: createRoom({ phase: 'LOBBY', round: null }),
+      sessionRole: 'display',
+      currentPlayerId: null,
+    });
+
+    const puzzle = screen.getByRole('region', { name: 'Puzzle' });
+    expect(puzzle.parentElement).toHaveClass('display-room-layout');
+    expect(puzzle.parentElement).not.toHaveClass('display-room-layout--active');
+  });
+
   it('shows the compact display QR only during an active round', () => {
     for (const room of [
       createRoom({ phase: 'LOBBY', round: null }),
diff --git a/apps/client/src/components/RoomLobby.tsx b/apps/client/src/components/RoomLobby.tsx
index e476ae9..73da7e3 100644
--- a/apps/client/src/components/RoomLobby.tsx
+++ b/apps/client/src/components/RoomLobby.tsx
@@ -350,7 +350,9 @@ export function RoomLobby({
             roundNumber={room.round.number}
           />
         ) : (
-          <div className="display-room-layout">
+          <div
+            className={`display-room-layout${roundIsActive ? ' display-room-layout--active' : ''}`}
+          >
             <aside
               className="panel display-side-panel"
               aria-labelledby="display-players-title"
diff --git a/apps/client/src/styles.css b/apps/client/src/styles.css
index 3b9edf1..d740b21 100644
--- a/apps/client/src/styles.css
+++ b/apps/client/src/styles.css
@@ -806,6 +806,9 @@ button:disabled {
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   gap: clamp(0.75rem, 2vw, 1.5rem);
 }
+.display-room-layout--active {
+  align-items: start;
+}
 .display-side-panel,
 .panel.display-active-join-qr {
   width: min(100%, 19rem);
diff --git a/apps/client/src/styles.test.ts b/apps/client/src/styles.test.ts
index 482760d..92502f0 100644
--- a/apps/client/src/styles.test.ts
+++ b/apps/client/src/styles.test.ts
@@ -107,7 +107,14 @@ describe('tile typography', () => {
     expect(styles).not.toContain('.display-header__qr');
     expect(styles).not.toContain('.display-header__join-qr');
     expect(styles).toMatch(
-      /\.display-room-layout\s*\{[^}]*grid-template-columns: minmax\(0, 1fr\) auto minmax\(0, 1fr\);/s,
+      /\.display-room-layout\s*\{[^}]*align-items: center;[^}]*grid-template-columns: minmax\(0, 1fr\) auto minmax\(0, 1fr\);/s,
+    );
+    const activeLayoutRule = styles.match(
+      /\.display-room-layout--active\s*\{[^}]*\}/s,
+    )?.[0];
+    expect(activeLayoutRule).toMatch(/align-items: start;/);
+    expect(activeLayoutRule).not.toMatch(
+      /(?:margin|transform|position|translate|\btop\s*:)/,
     );
     expect(styles).toMatch(
       /\.display-room-page\s*\{[^}]*min-height: calc\(100dvh - 4\.75rem\);/s,
diff --git a/docs/DEVELOPMENT_LOG.md b/docs/DEVELOPMENT_LOG.md
index e0d19ce..998fdf4 100644
--- a/docs/DEVELOPMENT_LOG.md
+++ b/docs/DEVELOPMENT_LOG.md
@@ -1,5 +1,12 @@
 # Development log
 
+## 2026-08-23 — Active TV column alignment (draft)
+
+- Added an active-round-only display layout modifier so the Players, Puzzle,
+  and join QR / Room Highlights columns share a top edge on landscape TVs.
+- Preserved the centered lobby layout, portrait ordering, panel dimensions,
+  and all gameplay and server behavior.
+
 ## 2026-08-20 — Strong high-density board candidate (draft)
 
 - Added a separate server-only strong selector that chooses the highest