From 60db2a91dfe913ec110ea94e045c0e11c78816d7 Mon Sep 17 00:00:00 2001 From: dnviti Date: Thu, 18 Dec 2025 00:45:37 +0100 Subject: [PATCH] fixes to left side panel --- docs/development/CENTRAL.md | 1 + ...2025-12-18-004109_fix_cube_sidebar_scrolling.md | 14 ++++++++++++++ src/client/src/modules/cube/CubeManager.tsx | 2 +- 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 docs/development/devlog/2025-12-18-004109_fix_cube_sidebar_scrolling.md diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 01a39d7..0bbe0b5 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -89,3 +89,4 @@ - [2025-12-17-184000_fix_draft_pool_ui](./devlog/2025-12-17-184000_fix_draft_pool_ui.md): Completed. Fixed "Your Pool" resizing bugs and removed unwanted hover animation. - [Customizable Deck Builder Layout](./devlog/2025-12-17-170000_customizable_deck_builder.md): Completed. Implemented switchable Vertical (Side-by-Side) and Horizontal (Top-Bottom) layouts, with an integrated, improved Land Station. - [Draft View Layout Selection](./devlog/2025-12-17-185000_draft_view_layout.md): Completed. Implemented Vertical/Horizontal layout selection for Draft View to match Deck Builder, optimizing screen space and preventing overlap. +- [Fix Cube Sidebar Scrolling](./devlog/2025-12-18-004109_fix_cube_sidebar_scrolling.md): Completed. Adjusted sidebar max-height to ensure autonomous scrolling and button accessibility on tablet screens. diff --git a/docs/development/devlog/2025-12-18-004109_fix_cube_sidebar_scrolling.md b/docs/development/devlog/2025-12-18-004109_fix_cube_sidebar_scrolling.md new file mode 100644 index 0000000..4905124 --- /dev/null +++ b/docs/development/devlog/2025-12-18-004109_fix_cube_sidebar_scrolling.md @@ -0,0 +1,14 @@ +# Fix Cube Manager Sidebar Scrolling on Tablets + +## Context +The user reported an issue on small tablet screens where the sticky sidebar in the Pack Generation UI (Cube Manager) cannot be scrolled to the bottom. The `max-height` of the sidebar was set to `100vh - 2rem`, which exceeds the actual visible viewport height when accounting for the application header (and potentially browser bars), causing the bottom of the sidebar (containing the critical "Generate Packs" button) to be clipped and inaccessible without scrolling the main page. + +## Changes +- Modified `src/client/src/modules/cube/CubeManager.tsx` to adjust the sidebar `max-height`. +- Changed `lg:max-h-[calc(100vh-2rem)]` to `lg:max-h-[calc(100vh-10rem)]`. +- This calculation (~ 10rem) accounts for the header height (approx 5-6rem), footer height (approx 2.5rem), and margins, ensuring the sidebar fits completely within the visible viewport. +- This ensures the `overflow-y-auto` property on the sidebar triggers correctly, allowing autonomous scrolling of the configuration panel regardless of the main page scroll position. + +## Verification +- Verified layout structure in `App.tsx` and proper nesting. +- The change applies to `lg` screens (desktop and horizontal tablet), where the sidebar is displayed as a sticky column. diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx index 9ae4864..ba0219a 100644 --- a/src/client/src/modules/cube/CubeManager.tsx +++ b/src/client/src/modules/cube/CubeManager.tsx @@ -456,7 +456,7 @@ export const CubeManager: React.FC = ({ packs, setPacks, avail
{/* --- LEFT COLUMN: CONTROLS --- */} -
+
{/* Source Toggle */}