From 4023ff3019a7aa3f4c10d20cb47b2a3155fcef9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Cort=C3=A9s?= <jecr@users.noreply.github.com>
Date: Tue, 4 Feb 2025 16:13:55 -0600
Subject: [PATCH] frontend: use fullscreen flag for layout height (#3225)

Fullscreen workflows don't fully extend vertically. This PR leverages
the existing flag to extend it to the ContentGrid component and
conditionally set its height.

### Before
<img width="1070" alt="image"
src="https://github.com/user-attachments/assets/cee183a9-e85c-4051-833e-e2ca2255a112"
/>

### After
<img width="1071" alt="image"
src="https://github.com/user-attachments/assets/99d736af-7b3f-4384-99c4-4965cfd20d03"
/>
---
 frontend/packages/core/src/AppLayout/index.tsx     | 14 +++++++++-----
 .../packages/core/src/Network/tests/index.test.ts  |  8 ++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/packages/core/src/AppLayout/index.tsx b/frontend/packages/core/src/AppLayout/index.tsx
index 4824752f26..b8bb560150 100644
--- a/frontend/packages/core/src/AppLayout/index.tsx
+++ b/frontend/packages/core/src/AppLayout/index.tsx
@@ -13,10 +13,14 @@ const AppGrid = styled(MuiGrid)({
   flex: 1,
 });
 
-const ContentGrid = styled(MuiGrid)({
-  flex: 1,
-  maxHeight: `calc(100vh - ${APP_BAR_HEIGHT})`,
-});
+const ContentGrid = styled(MuiGrid)<{ $isFullScreen: boolean }>(
+  {
+    flex: 1,
+  },
+  props => ({
+    maxHeight: props.$isFullScreen ? "100vh" : `calc(100vh - ${APP_BAR_HEIGHT})`,
+  })
+);
 
 const MainContent = styled.div({ overflowY: "auto", width: "100%" });
 
@@ -37,7 +41,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
         header &&
         React.cloneElement(header, { ...configuration, ...header.props })}
       {!configuration?.useFullScreenLayout && !header && <Header {...configuration} />}
-      <ContentGrid container wrap="nowrap">
+      <ContentGrid container wrap="nowrap" $isFullScreen={configuration?.useFullScreenLayout}>
         {isLoading ? (
           <Loadable isLoading={isLoading} variant="overlay" />
         ) : (
diff --git a/frontend/packages/core/src/Network/tests/index.test.ts b/frontend/packages/core/src/Network/tests/index.test.ts
index bbf43ce625..945b04d913 100644
--- a/frontend/packages/core/src/Network/tests/index.test.ts
+++ b/frontend/packages/core/src/Network/tests/index.test.ts
@@ -39,7 +39,7 @@ describe("error interceptor", () => {
 
     beforeAll(() => {
       window = global.window;
-      global.window = Object.create(window);
+      global.window ??= Object.create(window);
       Object.defineProperty(window, "location", {
         value: {
           href: "/example?foo=bar",
@@ -53,7 +53,7 @@ describe("error interceptor", () => {
     });
 
     afterAll(() => {
-      global.window = window;
+      global.window ??= window;
     });
 
     it("redirects to provided url", () => {
@@ -94,7 +94,7 @@ describe("error interceptor", () => {
     let err: Promise<ClutchError>;
     beforeAll(() => {
       window = global.window;
-      global.window = Object.create(window);
+      global.window ??= Object.create(window);
       Object.defineProperty(window, "location", {
         value: {
           href: "/example?foo=bar",
@@ -122,7 +122,7 @@ describe("error interceptor", () => {
     });
 
     afterAll(() => {
-      global.window = window;
+      global.window ??= window;
     });
 
     it("returns a ClutchError", () => {