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} /> ) : ( -