Files
mtg-online-drafter/docs/development/devlog/2025-12-16-203000_zoom_zone.md

784 B

Card Zoom on Hover - Dedicated Zone

Status

  • Add hoveredCard state to DraftView (Already done).
  • Implement onMouseEnter/onMouseLeave handlers (Already done).
  • Refactor DraftView layout to include a dedicated sidebar for card preview.
  • Move the zoomed card image into this dedicated zone instead of a fixed overlay.

Implementation Details

  • File: src/client/src/modules/draft/DraftView.tsx
  • Layout Change:
    • Wrap the central card selection area in a flex-row container.
    • Add a Left Sidebar (e.g., w-80) reserved for the zoomed card.
    • Ensure the main card grid takes up the remaining space (flex-1).
  • Behavior: When no card is hovered, the sidebar can show a placeholder or remain empty/decorative.