"Adjust multi-player columns" (#44)

This reverts commit 44a85ec.

Author: AHGIJMKLKKZNPJKQR

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 max-h-[150cqw] bottom-0 absolute">
+		<div ref={containerRef} className="w-full h-full">
 			{dimensions.width > 0 && dimensions.height > 0 && (
 				<canvas
 					ref={canvasRef}

deep-sea-stories/packages/web/src/components/PeerGrid.tsx

@@ -33,15 +33,15 @@ const PeerGrid: FC<PeerGridProps> = ({ roomId, localPeer, displayedPeers }) => {
 	return (
 		<section
 			className={cn(
-				'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 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-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 grid-rows-auto 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,
 				},
 			)}

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 relative @container">
+			<div className="flex-1 min-h-0">
 				<AudioVisualizer stream={agentStream} barColor="#10b982" />
 			</div>
 			<AgentModeToggle roomId={roomId} />