From 6614bc45d239df34b6a3448d04e4754ad21e5d76 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 26 Sep 2024 06:06:45 +1000
Subject: [PATCH] fix(ui): handle resizable panels not rendered in DOM

Fixes a bug introduced in a different bug fix in 9c0d357817a0a756543c3aa56de4b08bb1933a79.
---
 invokeai/frontend/web/src/features/ui/hooks/usePanel.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts b/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
index 871bd931352..f667626f03e 100644
--- a/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
+++ b/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
@@ -101,7 +101,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
         arg.panelGroupDirection
       );
 
-      if (minSizePct > 100) {
+      if (!minSizePct || minSizePct > 100 || !defaultSizePct || defaultSizePct > 100) {
         // This can happen when the panel is hidden
         return;
       }
@@ -244,6 +244,11 @@ const getSizeAsPercentage = (
   let availableSpace =
     panelGroupDirection === 'horizontal' ? panelGroupElement.offsetWidth : panelGroupElement.offsetHeight;
 
+  if (!availableSpace) {
+    // No available space, size is 0
+    return 0;
+  }
+
   // ...minus the width/height of the resize handles
   getResizeHandleElementsForGroup(id).forEach((el) => {
     availableSpace -= panelGroupDirection === 'horizontal' ? el.offsetWidth : el.offsetHeight;