Top-align active TV display columns

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 }),

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"

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);

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,

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