services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b0dc734859f01d323323f9c9d72da31aefd5370a
mtg-online-drafter/docs/development/devlog/2025-12-16-195000_draft_ui_polish.md

1.2 KiB
Raw Blame History

Draft Interface UI Polish

Status

  • Analyze current UI issues (bottom border, scrolling).
  • Remove global padding from App.tsx.
  • Refactor DraftView.tsx for a cleaner, game-like experience.
  • Implement immersive 3D effects and tray-style pool view.

Context

The user requested to improve the draft card pick interface. Specifically to remove the ugly bottom border, avoid page scrolls, and make it feel more like a game.

Implementation Details

src/client/src/App.tsx

  • Removed pb-20 from the main container to allow full-screen layouts without forced scrolling at the bottom.

src/client/src/modules/draft/DraftView.tsx

  • Layout: Changed to relative positioning with overflow-hidden to contain all elements within the viewport.
  • Visuals:
    • Added a radial gradient background overlay.
    • Redesigned the "Current Pack" area with [perspective:1000px] and 3D hover transforms.
    • Redesigned the "Your Pool" bottom area to be a "tray" with backdrop-blur, gradient background, and removed the boxy border.
  • Scrollbars: Hidden scrollbars in the main pack view for a cleaner look ([&::-webkit-scrollbar]:hidden).