services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: limit Cube Manager sidebar to 400px max-width on large screens and update documentation.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 02:03:15 +01:00
parent 75ffaa4f2a
commit cc0d60dc9e
3 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/development/devlog/2025-12-17-031000_sidebar_max_width.md Normal file
View File

@@ -0,0 +1,14 @@
# 2025-12-17 Left Sidebar Max Width
## Objective
Limit the left sidebar in the Cube Manager to a maximum width of 400px on large screens to prevent it from becoming excessively wide on high-resolution displays.
## Changes
1. **Layout Refactor (`src/client/src/modules/cube/CubeManager.tsx`)**:
* Change the main container from a CSS Grid (`grid-cols-12`) to a Flexbox layout (`flex-col lg:flex-row`).
* Set the left column width to `lg:w-1/3` with a strict `lg:max-w-[400px]` constraint.
* Set the right column to `flex-1` to take up remaining space.
## Rationale
The previous `lg:col-span-4` (33% width) scaled indefinitely on large screens (e.g., 2560px wide -> ~850px sidebar), which wastes space and stretches control inputs. A max-width constraint ensures the controls remain compact while the main content area (packs display) benefits from the extra screen real estate.