diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css index 77c8a09..abe61c9 100644 --- a/src/app/(frontend)/styles.css +++ b/src/app/(frontend)/styles.css @@ -1893,6 +1893,15 @@ font-size: 0.7rem; } +/* Below-felt variant: on narrow screens the toolbar renders in normal flow + under the felt because the felt's overflow-hidden clips the overlay row + there; static positioning cancels the overlay anchor. */ +.poker-action-toolbar-below { + position: static; + transform: none; + width: min(30rem, 100%); +} + .poker-action-toolbar .poker-betting-controls-compact { width: 100%; gap: 0.4rem; diff --git a/src/components/frontend/minigames/poker/PokerActionToolbar.tsx b/src/components/frontend/minigames/poker/PokerActionToolbar.tsx index 03cc3da..ea1db5e 100644 --- a/src/components/frontend/minigames/poker/PokerActionToolbar.tsx +++ b/src/components/frontend/minigames/poker/PokerActionToolbar.tsx @@ -11,12 +11,14 @@ interface PokerActionToolbarProps { readonly snapshot: SeatedSnapshot; readonly onSnapshot: (snapshot: PokerSnapshot) => void; readonly onActionFeedback: () => void; + readonly below?: boolean; } export function PokerActionToolbar({ snapshot, onSnapshot, onActionFeedback, + below = false, }: PokerActionToolbarProps) { const view = snapshot.you; @@ -25,14 +27,20 @@ export function PokerActionToolbar({ if (!view.yourTurn) { const actingPlayer = view.players.find((player) => player.seatId === view.toActSeat); return ( -
+
{actingPlayer ? `Waiting for ${actingPlayer.name}` : "Waiting for the table"}
); } return ( -
+
popup.tone === "leave"); + // Narrow screens render the action toolbar below the felt in flow: the + // overlay row is wider than the felt there and the felt clips it. + const [toolbarBelow, setToolbarBelow] = useState(false); + useEffect(() => { + const query = window.matchMedia("(max-width: 640px)"); + const update = () => setToolbarBelow(query.matches); + update(); + query.addEventListener("change", update); + return () => query.removeEventListener("change", update); + }, []); + return (
)} - {!spectator && ( + {!spectator && !toolbarBelow && ( + {!spectator && toolbarBelow && ( + + )} +