From 080546bf4721c92ffd30297c13d2a9a3e66aecfa Mon Sep 17 00:00:00 2001
From: Amr Ahmed Taher Mohamed <99883674+taheramr@users.noreply.github.com>
Date: Tue, 15 Nov 2022 20:39:08 +0100
Subject: [PATCH] fix: Fix split panel height calculations when screen viewport
 is resized (#479)

---
 .../__integ__/app-layout-split-panel.test.ts      | 11 +++++++++++
 src/app-layout/index.tsx                          | 15 +++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app-layout/__integ__/app-layout-split-panel.test.ts b/src/app-layout/__integ__/app-layout-split-panel.test.ts
index e8bd5d10c7..31436e5898 100644
--- a/src/app-layout/__integ__/app-layout-split-panel.test.ts
+++ b/src/app-layout/__integ__/app-layout-split-panel.test.ts
@@ -119,7 +119,18 @@ test(
     await expect(page.getPanelPosition()).resolves.toEqual('side');
   })
 );
+test(
+  'switches to bottom position when screen resizes to mobile',
+  setupTest(async page => {
+    await page.openPanel();
+    await page.switchPosition('side');
+    await expect(page.getPanelPosition()).resolves.toEqual('side');
 
+    await page.setWindowSize(viewports.mobile);
+    await expect(page.getPanelPosition()).resolves.toEqual('bottom');
+    await expect(page.getContentMarginBottom()).resolves.toEqual('160px');
+  })
+);
 test(
   'switches to bottom position when screen is too narrow and restores back on resize',
   setupTest(async page => {
diff --git a/src/app-layout/index.tsx b/src/app-layout/index.tsx
index b69c6e1249..2817bf84b8 100644
--- a/src/app-layout/index.tsx
+++ b/src/app-layout/index.tsx
@@ -162,11 +162,15 @@ const OldAppLayout = React.forwardRef(
       footerSelector,
       disableBodyScroll
     );
+    const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
+
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.height);
     const [splitPanelHeaderHeight, splitPanelHeaderMeasureRef] = useContainerQuery(
       rect => (splitPanel ? rect.height : 0),
-      [splitPanel]
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [splitPanel, isSplitpanelForcedPosition]
     );
+
     const splitPanelHeaderRefObject = useRef(null);
     const splitPanelHeaderRef = useMergeRefs(splitPanelHeaderMeasureRef, splitPanelHeaderRefObject);
     const anyPanelOpen = navigationVisible || toolsVisible;
@@ -188,7 +192,7 @@ const OldAppLayout = React.forwardRef(
     const [splitPanelHeight, splitPanelRef] = useContainerQuery(
       rect => (splitPanel ? rect.height : 0),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [splitPanel, splitPanelPosition]
+      [splitPanel, splitPanelPosition, isSplitpanelForcedPosition]
     );
 
     const closedDrawerWidth = 40;
@@ -273,8 +277,7 @@ const OldAppLayout = React.forwardRef(
       }
     });
 
-    const [isForcedPosition, setIsForcedPosition] = useState(false);
-    const finalSplitPanePosition = isForcedPosition ? 'bottom' : splitPanelPosition;
+    const finalSplitPanePosition = isSplitpanelForcedPosition ? 'bottom' : splitPanelPosition;
 
     const splitPaneAvailableOnTheSide = Boolean(splitPanel) && finalSplitPanePosition === 'side';
     const splitPanelOpenOnTheSide = splitPaneAvailableOnTheSide && splitPanelOpen;
@@ -293,7 +296,7 @@ const OldAppLayout = React.forwardRef(
 
     useEffect(() => {
       const contentWidth = contentWidthWithSplitPanel - splitPanelSize;
-      setIsForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
+      setIsSplitpanelForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
       // This is a workaround to avoid a forced position due to splitPanelSize, which is
       // user controlled variable.
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -329,7 +332,7 @@ const OldAppLayout = React.forwardRef(
       isOpen: splitPanelOpen,
       isMobile,
       isRefresh: false,
-      isForcedPosition,
+      isForcedPosition: isSplitpanelForcedPosition,
       lastInteraction: splitPanelLastInteraction,
       splitPanelRef,
       splitPanelHeaderRef,