From bdfe0d1594b1f926c592b97144cdef483c4c411a Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Mon, 6 Apr 2026 15:18:15 +0200
Subject: [PATCH] chore: fix blackjack UI overflow and table sizing

- Remove max-w-4xl constraint to allow single-player tables to expand
- Add responsive container sizing: 95vw on mobile, up to 6xl on large screens
- Add horizontal scrolling for split hands with overflow-x-auto
- Increase spacing between split hands on larger screens (gap-1.5 -> sm:gap-2)
- Add padding to container for better spacing on small screens
---
 panel/src/games/blackjack/BlackjackGame.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/panel/src/games/blackjack/BlackjackGame.tsx b/panel/src/games/blackjack/BlackjackGame.tsx
index cd01278..9a4a077 100644
--- a/panel/src/games/blackjack/BlackjackGame.tsx
+++ b/panel/src/games/blackjack/BlackjackGame.tsx
@@ -285,7 +285,7 @@ function Seat({ seat, playerName, isMe, isActivePlayer, activeHandIdx, betAmount
 
             {/* Hands */}
             {hasHands && (
-                <div className={`flex gap-1 ${seat.hands.length > 1 ? "flex-row" : "flex-col"}`}>
+                <div className={`flex gap-1.5 sm:gap-2 ${seat.hands.length > 1 ? "flex-row" : "flex-col"} overflow-x-auto sm:overflow-visible pb-1`}>
                     {seat.hands.map((hand, hi) => (
                         <HandDisplay
                             key={hi}
@@ -497,7 +497,9 @@ export function BlackjackGame({ state, myPlayerId, isSpectator, onAction, player
     const handleSit = useCallback(() => onAction({ type: "sit_down" }), [onAction]);
 
     return (
-        <div className="flex flex-col gap-3 w-full max-w-4xl mx-auto">
+        <div className={`flex flex-col gap-3 w-full mx-auto px-2 sm:px-4 ${
+            view.turnOrder.length === 1 ? 'max-w-[95vw] md:max-w-5xl lg:max-w-6xl' : 'max-w-4xl'
+        }`}>
             {/* Leave table button */}
             {!isSpectator && (
                 <div className="flex justify-end">