fix: Enhance Cube Manager mobile UI by adjusting sidebar and header layouts and disabling card hover previews.
This commit is contained in:
20
docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md
Normal file
20
docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user