fix: Set nested app layout height to 100% (#3100)

Co-authored-by: Joan Perals <[email protected]>

Author: georgylobko

src/app-layout/__integ__/multi-app-layout.test.ts

@@ -50,6 +50,27 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
           });
         })
       );
+
+      test(
+        'secondary layout does not vertically overflow the primary one',
+        setupTest(async page => {
+          // Provide enough height for all page elements to fit without overflow
+          const outerBrowserWindowHeight = 1400;
+          await page.setWindowSize({ width: 1200, height: outerBrowserWindowHeight });
+
+          // Retrieve the actual viewport size, excluding browser UI
+          const { height: innerViewportSize } = await page.getViewportSize();
+
+          const { bottom: mainLayoutBottom } = await page.getBoundingBox(mainLayout.toSelector());
+          expect(mainLayoutBottom).toBeLessThanOrEqual(innerViewportSize);
+
+          await page.runInsideIframe(iframeId, !!iframe, async () => {
+            const { bottom: secondaryLayoutBottom } = await page.getBoundingBox(secondaryLayout.toSelector());
+            expect(secondaryLayoutBottom).toBeLessThanOrEqual(innerViewportSize);
+            expect(secondaryLayoutBottom).toBeLessThanOrEqual(mainLayoutBottom);
+          });
+        })
+      );
     });
   });
 });

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

@@ -467,6 +467,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
         {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}
         <SkeletonLayout
           ref={useMergeRefs(intersectionObserverRef, rootRef)}
+          isNested={isNested}
           style={{
             paddingBlockEnd:
               splitPanelPosition === 'bottom'

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

@@ -40,6 +40,7 @@ interface SkeletonLayoutProps
   globalTools?: React.ReactNode;
   globalToolsOpen?: boolean;
   navigationAnimationDisabled?: boolean;
+  isNested?: boolean;
 }
 
 export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(
@@ -67,6 +68,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
       disableContentPaddings,
       globalToolsOpen,
       navigationAnimationDisabled,
+      isNested,
     },
     ref
   ) => {
@@ -81,7 +83,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
           [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
         })}
         style={{
-          minBlockSize: `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
+          minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
           [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
           [customCssProps.navigationWidth]: `${navigationWidth}px`,
           [customCssProps.toolsWidth]: `${toolsWidth}px`,