Fix clipping issue.

2026-07-23 07:39:58 -04:00
parent e5604cde8e
commit 65bf3bf618
2 changed files with 45 additions and 26 deletions
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
 import type { BattleEvent, Card, ClientMessage, GameView } from '../types'
 import { CardView } from './CardView'
 import { DiceTray } from './Dice'
@@ -175,7 +176,13 @@ export function BattlePhase({ view, send }: Props) {
  const events = battle.events ?? []
  const [step, setStep] = useState(0)
  const [acked, setAcked] = useState(false)
-  const [peekSeat, setPeekSeat] = useState<number | null>(null)
+  // The deck-peek popover lives inside .battlefield, which sets overflow-x
+  // (and thus overflow-y) to auto — so an absolutely-positioned popover gets
+  // clipped to the battlefield. We anchor it to the hovered stack's viewport
+  // rect and portal it to <body> so it floats over the whole window instead.
+  const [peek, setPeek] = useState<{ seat: number; dir: 'left' | 'right'; rect: DOMRect } | null>(
+    null,
+  )
  const lineups = battle.lineups
  const done = step >= events.length
  const lastEvent = step > 0 ? events[step - 1] : null
@@ -226,8 +233,12 @@ export function BattlePhase({ view, send }: Props) {
    const stackEl = (
      <div
        className={`stackpile ${lineup.length ? 'peekable' : ''}`}
-        onMouseEnter={lineup.length ? () => setPeekSeat(seat) : undefined}
-        onMouseLeave={() => setPeekSeat((s) => (s === seat ? null : s))}
+        onMouseEnter={
+          lineup.length
+            ? (e) => setPeek({ seat, dir, rect: e.currentTarget.getBoundingClientRect() })
+            : undefined
+        }
+        onMouseLeave={() => setPeek((p) => (p?.seat === seat ? null : p))}
        title={lineup.length ? 'Hover to see the whole deck' : undefined}
      >
        {s.stack > 0 ? (
@@ -247,19 +258,6 @@ export function BattlePhase({ view, send }: Props) {
            <CardView card={lastEvent.card} size="sm" dead />
          </div>
        )}
-        {peekSeat === seat && lineup.length > 0 && (
-          <div className={`deck-peek deck-peek-${dir}`}>
-            <div className="deck-peek-label">
-              {seat === youSeat ? 'Your' : 'Opponent’s'} deck · {lineup.length} card
-              {lineup.length !== 1 ? 's' : ''} (top first)
-            </div>
-            <div className="deck-peek-cards">
-              {lineup.map((c, i) => (
-                <CardView key={c.id || i} card={c} size="sm" />
-              ))}
-            </div>
-          </div>
-        )}
      </div>
    )

@@ -393,6 +391,32 @@ export function BattlePhase({ view, send }: Props) {
        {renderSide(oppSeat, 'right')}
      </div>

+      {peek &&
+        (() => {
+          const lineup = lineups?.[peek.seat] ?? []
+          if (!lineup.length) return null
+          const style: React.CSSProperties = {
+            bottom: window.innerHeight - peek.rect.top + 8,
+            ...(peek.dir === 'left'
+              ? { left: peek.rect.left }
+              : { right: window.innerWidth - peek.rect.right }),
+          }
+          return createPortal(
+            <div className={`deck-peek deck-peek-${peek.dir}`} style={style}>
+              <div className="deck-peek-label">
+                {peek.seat === youSeat ? 'Your' : 'Opponent’s'} deck · {lineup.length} card
+                {lineup.length !== 1 ? 's' : ''} (top first)
+              </div>
+              <div className="deck-peek-cards">
+                {lineup.map((c, i) => (
+                  <CardView key={c.id || i} card={c} size="sm" />
+                ))}
+              </div>
+            </div>,
+            document.body,
+          )
+        })()}
+
      {done && (
        <div className={`battle-result ${draw ? 'is-draw' : won ? 'is-win' : 'is-loss'}`}>
          <div className="battle-result-title">