fix(game): center the trick area in RTL (felt no longer overflows its container)
The felt was w-[min(96vw,560px)] inside a p-3 flex container; on phones 96vw exceeds the padded width, and an overflowing flex item under justify-center in an RTL layout pins to the start (right) and overflows left — so the trick area (centered on the felt) drifted off-center. Added max-w-full to cap the felt to its container so justify-center truly centers it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -186,7 +186,10 @@ export function GameTable({
|
||||
|
||||
{/* Felt table — portrait proportions (tall, centered between HUD and hand) */}
|
||||
<div className="absolute inset-x-0 top-16 bottom-44 flex items-center justify-center p-3">
|
||||
<div className="felt relative w-[min(96vw,560px)] h-full max-h-[680px] rounded-[44%]">
|
||||
{/* max-w-full so the felt never exceeds its padded container — otherwise an
|
||||
overflowing flex item under justify-center pins to the (RTL) start and
|
||||
the trick area, centered on the felt, drifts off-center. */}
|
||||
<div className="felt relative w-[min(96vw,560px)] max-w-full h-full max-h-[680px] rounded-[44%]">
|
||||
{/* opponent + partner seats */}
|
||||
<SeatAvatar seat={2} className="absolute top-3 left-1/2 -translate-x-1/2" />
|
||||
<SeatAvatar seat={1} className="absolute top-1/2 right-3 -translate-y-1/2" />
|
||||
|
||||
Reference in New Issue
Block a user