From 545411137c2560de503c6826b3de7af9a557669e Mon Sep 17 00:00:00 2001
From: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>
Date: Mon, 14 Jul 2025 11:50:27 -0400
Subject: [PATCH] fix(panels): Allow for setting the initial and minimum
 expanded widths of each side panel. (#5207)

---
 .../src/ViewerLayout/ResizablePanelsHook.tsx  | 17 ++++-
 .../src/ViewerLayout/constants/panels.ts      | 66 ++++++++++---------
 extensions/default/src/ViewerLayout/index.tsx | 10 ++-
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx b/extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
index 91a1ee458..0e3dce222 100644
--- a/extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
+++ b/extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback, useLayoutEffect, useRef } from 'react';
 import { getPanelElement, getPanelGroupElement } from 'react-resizable-panels';
-import { panelGroupDefinition } from './constants/panels';
+import { getPanelGroupDefinition } from './constants/panels';
 
 /**
  * Set the minimum and maximum css style width attributes for the given element.
@@ -30,8 +30,21 @@ const useResizablePanels = (
   rightPanelClosed,
   setRightPanelClosed,
   hasLeftPanels,
-  hasRightPanels
+  hasRightPanels,
+  leftPanelInitialExpandedWidth,
+  rightPanelInitialExpandedWidth,
+  leftPanelMinimumExpandedWidth,
+  rightPanelMinimumExpandedWidth
 ) => {
+  const [panelGroupDefinition] = useState(
+    getPanelGroupDefinition({
+      leftPanelInitialExpandedWidth,
+      rightPanelInitialExpandedWidth,
+      leftPanelMinimumExpandedWidth,
+      rightPanelMinimumExpandedWidth,
+    })
+  );
+
   const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
     panelGroupDefinition.left.initialExpandedWidth
   );
diff --git a/extensions/default/src/ViewerLayout/constants/panels.ts b/extensions/default/src/ViewerLayout/constants/panels.ts
index 3219e6c51..b1901689f 100644
--- a/extensions/default/src/ViewerLayout/constants/panels.ts
+++ b/extensions/default/src/ViewerLayout/constants/panels.ts
@@ -3,36 +3,40 @@ const collapsedInsideBorderSize = 4;
 const collapsedOutsideBorderSize = 4;
 const collapsedWidth = 25;
 
-const rightPanelInitialExpandedWidth = 280;
-const leftPanelInitialExpandedWidth = 282;
-
-const panelGroupDefinition = {
-  groupId: 'viewerLayoutResizablePanelGroup',
-  shared: {
-    expandedInsideBorderSize,
-    collapsedInsideBorderSize,
-    collapsedOutsideBorderSize,
-    collapsedWidth,
-  },
-  left: {
-    // id
-    panelId: 'viewerLayoutResizableLeftPanel',
-    // expanded width
-    initialExpandedWidth: leftPanelInitialExpandedWidth,
-    // expanded width + expanded inside border
-    minimumExpandedOffsetWidth: 145 + expandedInsideBorderSize,
-    // initial expanded width
-    initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
-    // collapsed width + collapsed inside border + collapsed outside border
-    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
-  },
-  right: {
-    panelId: 'viewerLayoutResizableRightPanel',
-    initialExpandedWidth: rightPanelInitialExpandedWidth,
-    minimumExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
-    initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
-    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
-  },
+const getPanelGroupDefinition = ({
+  leftPanelInitialExpandedWidth = 282,
+  rightPanelInitialExpandedWidth = 280,
+  leftPanelMinimumExpandedWidth = 145,
+  rightPanelMinimumExpandedWidth = 280,
+}) => {
+  return {
+    groupId: 'viewerLayoutResizablePanelGroup',
+    shared: {
+      expandedInsideBorderSize,
+      collapsedInsideBorderSize,
+      collapsedOutsideBorderSize,
+      collapsedWidth,
+    },
+    left: {
+      // id
+      panelId: 'viewerLayoutResizableLeftPanel',
+      // expanded width
+      initialExpandedWidth: leftPanelInitialExpandedWidth,
+      // expanded width + expanded inside border
+      minimumExpandedOffsetWidth: leftPanelMinimumExpandedWidth + expandedInsideBorderSize,
+      // initial expanded width
+      initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
+      // collapsed width + collapsed inside border + collapsed outside border
+      collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
+    },
+    right: {
+      panelId: 'viewerLayoutResizableRightPanel',
+      initialExpandedWidth: rightPanelInitialExpandedWidth,
+      minimumExpandedOffsetWidth: rightPanelMinimumExpandedWidth + expandedInsideBorderSize,
+      initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+      collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
+    },
+  };
 };
 
-export { panelGroupDefinition };
+export { getPanelGroupDefinition };
diff --git a/extensions/default/src/ViewerLayout/index.tsx b/extensions/default/src/ViewerLayout/index.tsx
index b29afdf07..c1bbb42cf 100644
--- a/extensions/default/src/ViewerLayout/index.tsx
+++ b/extensions/default/src/ViewerLayout/index.tsx
@@ -24,6 +24,10 @@ function ViewerLayout({
   rightPanelClosed = false,
   leftPanelResizable = false,
   rightPanelResizable = false,
+  leftPanelInitialExpandedWidth,
+  rightPanelInitialExpandedWidth,
+  leftPanelMinimumExpandedWidth,
+  rightPanelMinimumExpandedWidth,
 }: withAppTypes): React.FunctionComponent {
   const [appConfig] = useAppConfig();
 
@@ -54,7 +58,11 @@ function ViewerLayout({
     rightPanelClosed,
     setRightPanelClosed,
     hasLeftPanels,
-    hasRightPanels
+    hasRightPanels,
+    leftPanelInitialExpandedWidth,
+    rightPanelInitialExpandedWidth,
+    leftPanelMinimumExpandedWidth,
+    rightPanelMinimumExpandedWidth
   );
 
   const handleMouseEnter = () => {