From cc0d60dc9ec775a38f671cb7cf28c43844b31fa6 Mon Sep 17 00:00:00 2001
From: dnviti <dnviti@gmail.com>
Date: Wed, 17 Dec 2025 02:03:15 +0100
Subject: [PATCH] feat: limit Cube Manager sidebar to 400px max-width on large
 screens and update documentation.

---
 docs/development/CENTRAL.md                        |  1 +
 .../devlog/2025-12-17-031000_sidebar_max_width.md  | 14 ++++++++++++++
 src/client/src/modules/cube/CubeManager.tsx        |  6 +++---
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 docs/development/devlog/2025-12-17-031000_sidebar_max_width.md

diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md
index 323958e..8e9e91e 100644
--- a/docs/development/CENTRAL.md
+++ b/docs/development/CENTRAL.md
@@ -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.
diff --git a/docs/development/devlog/2025-12-17-031000_sidebar_max_width.md b/docs/development/devlog/2025-12-17-031000_sidebar_max_width.md
new file mode 100644
index 0000000..d76e5cc
--- /dev/null
+++ b/docs/development/devlog/2025-12-17-031000_sidebar_max_width.md
@@ -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.
diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx
index 7a6a3fc..dd43d79 100644
--- a/src/client/src/modules/cube/CubeManager.tsx
+++ b/src/client/src/modules/cube/CubeManager.tsx
@@ -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">