21 lines
1.2 KiB
Markdown
21 lines
1.2 KiB
Markdown
# Cube Manager Mobile Improvements
|
|
|
|
## Objective
|
|
Fix usability issues on mobile devices where UI elements were overlapping and "unusable".
|
|
|
|
## Changes
|
|
1. **Sidebar Responsiveness**:
|
|
- Modified `CubeManager.tsx` to apply `sticky` positioning to the left sidebar *only* on large screens (`lg:` prefix). On mobile, it is now standard static flow.
|
|
- Limited `max-height` and `overflow-y-auto` only to `lg:` screens.
|
|
|
|
2. **Header Improvements**:
|
|
- Updated the "Packs" sticky header in `CubeManager.tsx` to handle wrapping gracefully.
|
|
- Added `backdrop-blur-xl` and slightly higher opacity to ensure content behind it doesn't bleed through visually (fixing "overlap" perception).
|
|
- Enabled `overflow-x-auto` for the buttons container to prevent them from breaking out of the viewport on very narrow screens.
|
|
|
|
3. **Disable Heavy Hovers**:
|
|
- Modified `CardPreview.tsx` to disable the `FloatingPreview` (large full-card hover) on devices with width < 1024px. This prevents the preview from sticking or covering the UI on touch devices.
|
|
|
|
## Result
|
|
The UI should now be clean and usable on mobile, with no overlapping elements and a natural scroll flow.
|