From 6d1f7a6a05467924182919e349eda8cb259dad25 Mon Sep 17 00:00:00 2001
From: Bernard Gawor <gaworbernard@gmail.com>
Date: Fri, 12 Dec 2025 12:27:52 +0100
Subject: [PATCH 1/2] make 3 players layout clean

---
 deep-sea-stories/packages/web/src/components/PeerGrid.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/deep-sea-stories/packages/web/src/components/PeerGrid.tsx b/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
index e903e7f..a7304ad 100644
--- a/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
+++ b/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
@@ -33,12 +33,16 @@ const PeerGrid: FC<PeerGridProps> = ({ roomId, localPeer, displayedPeers }) => {
 	return (
 		<section
 			className={cn(
-				'flex-1 md:flex-1 items-center w-full justify-items-center grid gap-2 md:gap-4 p-2 md:py-10 md:px-6 overflow-hidden grid-cols-2 grid-rows-2 xl:grid-cols-4 xl:grid-rows-1',
+				'flex-1 md:flex-1 items-center w-full justify-items-center grid gap-2 md:gap-4 p-2 md:py-10 md:px-6 overflow-hidden',
 				{
 					'grid-cols-1 grid-rows-1 xl:grid-cols-1 md:grid-rows-1':
 						displayedPeers.length === 0,
-					'grid-rows-2 grid-cols-1 md:grid-cols-2 md:grid-rows-1 xl:grid-rows-1 xl:grid-cols-2':
+					'grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 xl:grid-rows-1 xl:grid-cols-2':
 						displayedPeers.length === 1,
+					'grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-1 xl:grid-cols-3 place-items-center':
+						displayedPeers.length === 2,
+					'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 place-items-center':
+						displayedPeers.length >= 3,
 				},
 			)}
 		>

From 8795d971c28c22838f14e3bf1d43babed866a734 Mon Sep 17 00:00:00 2001
From: Bernard Gawor <81643606+Gawor270@users.noreply.github.com>
Date: Fri, 12 Dec 2025 12:30:52 +0100
Subject: [PATCH 2/2] Update
 deep-sea-stories/packages/web/src/components/PeerGrid.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 deep-sea-stories/packages/web/src/components/PeerGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/deep-sea-stories/packages/web/src/components/PeerGrid.tsx b/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
index a7304ad..9aa15b2 100644
--- a/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
+++ b/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
@@ -41,7 +41,7 @@ const PeerGrid: FC<PeerGridProps> = ({ roomId, localPeer, displayedPeers }) => {
 						displayedPeers.length === 1,
 					'grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-1 xl:grid-cols-3 place-items-center':
 						displayedPeers.length === 2,
-					'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 place-items-center':
+					'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 grid-rows-auto place-items-center':
 						displayedPeers.length >= 3,
 				},
 			)}