From ecedfce7584aa4d778c449e1fc086a5567bc7803 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 7 Jul 2025 18:55:32 +1000
Subject: [PATCH] feat(ui): support a min expanded size for collapsible panels

---
 .../components/BoardsListPanelContent.tsx     | 10 ++++++++--
 .../features/gallery/components/Gallery.tsx   |  4 +++-
 .../web/src/features/ui/layouts/shared.ts     |  2 ++
 .../layouts/use-collapsible-gridview-panel.ts | 19 +++++++++++++------
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx b/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx
index d6442b8ef8..dfddf5b207 100644
--- a/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx
@@ -9,7 +9,12 @@ import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
 import { selectBoardSearchText } from 'features/gallery/store/gallerySelectors';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
-import { BOARD_PANEL_DEFAULT_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID } from 'features/ui/layouts/shared';
+import {
+  BOARD_PANEL_DEFAULT_HEIGHT_PX,
+  BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX,
+  BOARD_PANEL_MIN_HEIGHT_PX,
+  BOARDS_PANEL_ID,
+} from 'features/ui/layouts/shared';
 import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
@@ -27,7 +32,8 @@ export const BoardsPanel = memo(() => {
     BOARDS_PANEL_ID,
     'vertical',
     BOARD_PANEL_DEFAULT_HEIGHT_PX,
-    BOARD_PANEL_MIN_HEIGHT_PX
+    BOARD_PANEL_MIN_HEIGHT_PX,
+    BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX
   );
   const isCollapsed = useStore(collapsibleApi.$isCollapsed);
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
index 5eaffb94dc..7f29168b5e 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
@@ -10,6 +10,7 @@ import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
 import {
   GALLERY_PANEL_DEFAULT_HEIGHT_PX,
   GALLERY_PANEL_ID,
+  GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX,
   GALLERY_PANEL_MIN_HEIGHT_PX,
 } from 'features/ui/layouts/shared';
 import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
@@ -38,7 +39,8 @@ export const GalleryPanel = memo(() => {
     GALLERY_PANEL_ID,
     'vertical',
     GALLERY_PANEL_DEFAULT_HEIGHT_PX,
-    GALLERY_PANEL_MIN_HEIGHT_PX
+    GALLERY_PANEL_MIN_HEIGHT_PX,
+    GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX
   );
   const isCollapsed = useStore(collapsibleApi.$isCollapsed);
 
diff --git a/invokeai/frontend/web/src/features/ui/layouts/shared.ts b/invokeai/frontend/web/src/features/ui/layouts/shared.ts
index 7b4fce7ea4..ec26851aab 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/shared.ts
+++ b/invokeai/frontend/web/src/features/ui/layouts/shared.ts
@@ -24,9 +24,11 @@ export const LEFT_PANEL_MIN_SIZE_PX = 420;
 export const RIGHT_PANEL_MIN_SIZE_PX = 420;
 
 export const BOARD_PANEL_MIN_HEIGHT_PX = 36;
+export const BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX = 128;
 export const BOARD_PANEL_DEFAULT_HEIGHT_PX = 232;
 
 export const GALLERY_PANEL_MIN_HEIGHT_PX = 36;
+export const GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX = 128;
 export const GALLERY_PANEL_DEFAULT_HEIGHT_PX = 232;
 
 export const LAYERS_PANEL_MIN_HEIGHT_PX = 36;
diff --git a/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts b/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts
index c67444346a..6ea015e749 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts
+++ b/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts
@@ -21,7 +21,8 @@ export const useCollapsibleGridviewPanel = (
   panelId: string,
   orientation: 'horizontal' | 'vertical',
   defaultSize: number,
-  collapsedSize?: number
+  collapsedSize?: number,
+  minExpandedSize?: number
 ) => {
   const $isCollapsed = useState(() => atom(false))[0];
   const lastExpandedSizeRef = useRef<number>(0);
@@ -46,12 +47,18 @@ export const useCollapsibleGridviewPanel = (
     if (!panel || !(panel instanceof GridviewPanel)) {
       return;
     }
-    if (orientation === 'vertical') {
-      panel.api.setSize({ height: lastExpandedSizeRef.current || defaultSize });
-    } else {
-      panel.api.setSize({ width: lastExpandedSizeRef.current || defaultSize });
+
+    let newSize = lastExpandedSizeRef.current || defaultSize;
+    if (minExpandedSize && newSize < minExpandedSize) {
+      newSize = minExpandedSize;
     }
-  }, [defaultSize, orientation, panelId, tab]);
+
+    if (orientation === 'vertical') {
+      panel.api.setSize({ height: newSize });
+    } else {
+      panel.api.setSize({ width: newSize });
+    }
+  }, [defaultSize, minExpandedSize, orientation, panelId, tab]);
 
   const toggle = useCallback(() => {
     const panel = navigationApi.getPanel(tab, panelId);