From 91d436f015e8142de963266b7d5fb108b5f5adad Mon Sep 17 00:00:00 2001
From: Tomasz Mazur <47872060+AHGIJMKLKKZNPJKQR@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:51:54 +0100
Subject: [PATCH] Small styling tweaks

---
 .../packages/web/src/components/AudioVisualizer.tsx           | 2 +-
 deep-sea-stories/packages/web/src/components/PeerGrid.tsx     | 4 ++--
 .../packages/web/src/components/RiddleMasterPanel.tsx         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/deep-sea-stories/packages/web/src/components/AudioVisualizer.tsx b/deep-sea-stories/packages/web/src/components/AudioVisualizer.tsx
index 51aacf4..e73cfa9 100644
--- a/deep-sea-stories/packages/web/src/components/AudioVisualizer.tsx
+++ b/deep-sea-stories/packages/web/src/components/AudioVisualizer.tsx
@@ -151,7 +151,7 @@ const AudioVisualizer: FC<AudioVisualizerProps> = ({
 	}, []);
 
 	return (
-		<div ref={containerRef} className="w-full h-full">
+		<div ref={containerRef} className="w-full h-full max-h-[150cqw] bottom-0 absolute">
 			{dimensions.width > 0 && dimensions.height > 0 && (
 				<canvas
 					ref={canvasRef}
diff --git a/deep-sea-stories/packages/web/src/components/PeerGrid.tsx b/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
index 9aa15b2..3592f12 100644
--- a/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
+++ b/deep-sea-stories/packages/web/src/components/PeerGrid.tsx
@@ -33,7 +33,7 @@ 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',
+				'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,
@@ -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 grid-rows-auto place-items-center':
+					'grid-cols-2 grid-rows-auto place-items-center':
 						displayedPeers.length >= 3,
 				},
 			)}
diff --git a/deep-sea-stories/packages/web/src/components/RiddleMasterPanel.tsx b/deep-sea-stories/packages/web/src/components/RiddleMasterPanel.tsx
index 2b6f69e..79e5a67 100644
--- a/deep-sea-stories/packages/web/src/components/RiddleMasterPanel.tsx
+++ b/deep-sea-stories/packages/web/src/components/RiddleMasterPanel.tsx
@@ -15,7 +15,7 @@ const RiddleMasterPanel: FC<RiddleMasterPanelProps> = ({
 	return (
 		<div className="hidden lg:flex flex-col lg:w-1/3 bg-card min-h-0 lg:m-2 gap-2">
 			<GameTimer roomId={roomId} />
-			<div className="flex-1 min-h-0">
+			<div className="flex-1 min-h-0 relative @container">
 				<AudioVisualizer stream={agentStream} barColor="#10b982" />
 			</div>
 			<AgentModeToggle roomId={roomId} />