feat: Refactor application layout for full-height content and implement resizable draft UI with card zoom and scaling.

This commit is contained in:
2025-12-16 19:09:53 +01:00
parent 4663c968ee
commit ca76405986
12 changed files with 261 additions and 42 deletions

View File

@@ -0,0 +1,23 @@
# Draft Interface UI Polish
## Status
- [x] Analyze current UI issues (bottom border, scrolling).
- [x] Remove global padding from `App.tsx`.
- [x] Refactor `DraftView.tsx` for a cleaner, game-like experience.
- [x] 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`).