feat: limit Cube Manager sidebar to 400px max-width on large screens and update documentation.
This commit is contained in:
@@ -65,3 +65,4 @@
|
||||
- [Squared Art Crops](./devlog/2025-12-17-030500_squared_art_crops.md): Completed. Enforced square aspect ratio for art-crop thumbnails to optimize visual density and stacking.
|
||||
- [Fix Expansion Generation Limit](./devlog/2025-12-17-024500_fix_expansion_generation_limit.md): Completed. Implemented "Unlimited Pool" mode for expansion drafts to allow generating large numbers of packs from singleton set data.
|
||||
- [Change Default Filter Flags](./devlog/2025-12-17-025500_change_default_flags.md): Completed. Updated client and server defaults for "Ignore Basic Lands", "Ignore Commander Sets", and "Ignore Tokens" to be unchecked (false).
|
||||
- [Sidebar Max Width](./devlog/2025-12-17-031000_sidebar_max_width.md): Completed. Constrained the left sidebar in Cube Manager to a maximum width of 400px on large screens to improve layout balance.
|
||||
|
||||
@@ -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.
|
||||
@@ -333,10 +333,10 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8 p-4 md:p-6">
|
||||
<div className="h-full overflow-y-auto w-full flex flex-col lg:flex-row gap-8 p-4 md:p-6">
|
||||
|
||||
{/* --- LEFT COLUMN: CONTROLS --- */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-4 lg:sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto custom-scrollbar p-1">
|
||||
<div className="w-full lg:w-1/3 lg:max-w-[400px] shrink-0 flex flex-col gap-4 lg:sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto custom-scrollbar p-1">
|
||||
<div className="bg-slate-800 rounded-xl p-4 border border-slate-700 shadow-xl">
|
||||
{/* Source Toggle */}
|
||||
<div className="flex p-1 bg-slate-900 rounded-lg mb-4 border border-slate-700">
|
||||
@@ -635,7 +635,7 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
|
||||
</div>
|
||||
|
||||
{/* --- RIGHT COLUMN: PACKS --- */}
|
||||
<div className="lg:col-span-8">
|
||||
<div className="flex-1 w-full min-w-0">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4 sticky top-4 z-40 bg-slate-900/95 backdrop-blur-xl p-3 rounded-xl border border-white/10 shadow-2xl">
|
||||
<div className="flex items-center gap-4 w-full sm:w-auto justify-between sm:justify-start">
|
||||
<h2 className="text-xl font-bold text-white flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user