fix: Prevent collapsed bottom split panel from covering content (#3144)

src/app-layout/__integ__/app-layout-split-panel.test.ts

@@ -258,6 +258,20 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
     })
   );
 
+  test(
+    'avoids covering the page content when collapsed at the bottom',
+    setupTest(async page => {
+      const splitPanel = wrapper.findSplitPanel();
+      const splitPanelSelector = wrapper.findSplitPanel().toSelector();
+      const contentSelector = wrapper.findContentRegion().findSpaceBetween().toSelector();
+      await expect(page.isExisting(splitPanel.findOpenButton().toSelector())).resolves.toBe(true);
+      await page.windowScrollTo({ top: 1000 });
+      const { top: splitPAnelTop } = await page.getBoundingBox(splitPanelSelector);
+      const { bottom: contentBottom } = await page.getBoundingBox(contentSelector);
+      expect(splitPAnelTop).toBeGreaterThanOrEqual(contentBottom);
+    })
+  );
+
   describe('interaction with table sticky header', () => {
     // bottom padding is included into the offset in VR but not in classic
     const splitPanelPadding = theme === 'refresh' ? 40 : 0;

src/app-layout/visual-refresh-toolbar/index.tsx

@@ -204,6 +204,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
     );
 
     const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
+    const [splitPanelHeaderBlockSize, setSplitPanelHeaderBlockSize] = useState(0);
 
     const onSplitPanelResizeHandler = (size: number) => {
       setSplitPanelSize(size);
@@ -362,9 +363,8 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       onToggle: onSplitPanelToggleHandler,
       position: splitPanelPosition,
       reportSize: size => setSplitPanelReportedSize(size),
-      reportHeaderHeight: () => {
-        /*unused in this design*/
-      },
+      reportHeaderHeight: size => setSplitPanelHeaderBlockSize(size),
+      headerHeight: splitPanelHeaderBlockSize,
       rightOffset: 0,
       size: splitPanelSize,
       topOffset: 0,
@@ -467,7 +467,12 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
         <SkeletonLayout
           ref={useMergeRefs(intersectionObserverRef, rootRef)}
           style={{
-            paddingBlockEnd: splitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : '',
+            paddingBlockEnd:
+              splitPanelPosition === 'bottom'
+                ? splitPanelOpen
+                  ? splitPanelReportedSize
+                  : splitPanelHeaderBlockSize
+                : '',
             ...(hasToolbar || !isNested
               ? {
                   [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,

src/internal/context/split-panel-context.ts

@@ -28,6 +28,7 @@ export interface SplitPanelContextBaseProps {
   onToggle: () => void;
   onPreferencesChange: (detail: { position: 'side' | 'bottom' }) => void;
   reportHeaderHeight: (pixels: number) => void;
+  headerHeight?: number;
   setSplitPanelToggle: (config: SplitPanelSideToggleProps) => void;
   refs: SplitPanelFocusControlRefs;
 }

src/split-panel/bottom.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
@@ -41,16 +41,15 @@ export function SplitPanelContentBottom({
     disableContentPaddings,
     contentWrapperPaddings,
     reportHeaderHeight,
+    headerHeight: headerBlockSize,
     animationDisabled,
   } = useSplitPanelContext();
   const isMobile = useMobile();
 
   const headerRef = useRef<HTMLDivElement>(null);
-  const [headerBlockSize, setHeaderBlockSize] = useState<number>();
 
   useResizeObserver(headerRef, entry => {
     const { borderBoxHeight } = entry;
-    setHeaderBlockSize(borderBoxHeight);
     reportHeaderHeight(borderBoxHeight);
   });