services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49080d82334d03fc7a05eb0ac2d62ab023d787f9
mtg-online-drafter/docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md

1.2 KiB
Raw Blame History

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.