feat(poker): move action toolbar below the felt on narrow screens

Co-authored-by: Sisyphus <sisyphus@ohmyopencode.dev>

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;

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 (
-      <div className="poker-action-toolbar poker-action-toolbar-waiting" role="status">
+      <div
+        className={`poker-action-toolbar poker-action-toolbar-waiting${below ? " poker-action-toolbar-below" : ""}`}
+        role="status"
+      >
         {actingPlayer ? `Waiting for ${actingPlayer.name}` : "Waiting for the table"}
       </div>
     );
   }
 
   return (
-    <div className="poker-action-toolbar" aria-label="Poker actions">
+    <div
+      className={`poker-action-toolbar${below ? " poker-action-toolbar-below" : ""}`}
+      aria-label="Poker actions"
+    >
       <BettingControls
         tableId={snapshot.tableId}
         snapshotVersion={snapshot.version}

src/components/frontend/minigames/poker/PokerFeltCanvas.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import type { Card, PublicPlayerView } from "@/lib/minigames/poker";
 import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
@@ -110,6 +111,17 @@ export function PokerFeltCanvas({
   const viewerPopups = popupsForSeat(view.viewerSeat);
   const tableAnnouncements = popups.filter((popup) => 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 (
     <div className="poker-table-stage">
       <div
@@ -252,7 +264,7 @@ export function PokerFeltCanvas({
           </div>
         )}
 
-        {!spectator && (
+        {!spectator && !toolbarBelow && (
           <PokerActionToolbar
             snapshot={snapshot}
             onSnapshot={onSnapshot}
@@ -287,6 +299,15 @@ export function PokerFeltCanvas({
         )}
       </div>
 
+      {!spectator && toolbarBelow && (
+        <PokerActionToolbar
+          snapshot={snapshot}
+          onSnapshot={onSnapshot}
+          onActionFeedback={onActionFeedback}
+          below
+        />
+      )}
+
       <PokerActionConsole
         snapshot={snapshot}
         handLabel={handLabel}