mtg-online-drafter/docs/development/devlog/2025-12-16-201500_card_zoom.md

Card Zoom on Hover

Status

• Add hoveredCard state to DraftView.
• Implement onMouseEnter/onMouseLeave handlers for cards in both Pick and Pool areas.
• rendering a fixed, high z-index preview of the hovered card.
• Disable right-click context menu on Draft interface.

Implementation Details

• File: src/client/src/modules/draft/DraftView.tsx
• Zoom Component: A fixed div containing the large card image.
• Position: Fixed to the left or right side of the screen (e.g., left-10 top-1/2 -translate-y-1/2) to avoid covering the grid being interacted with (which is usually centered).
• Styling: Large size (e.g., w-80 or h-[500px]), shadow, border, rounded corners.