From 4bffb9929c47a35948a7e5fe1c10bd1bd9fa597f Mon Sep 17 00:00:00 2001
From: Jorge Gonzalez
 <144717728+jorgeclaudiogonzalez-lyft@users.noreply.github.com>
Date: Mon, 5 Aug 2024 07:29:36 -0600
Subject: [PATCH] frontend: fix step container height to match stepper
 container (#3064)

<!--- TITLE FORMAT: "component: short description", e.g. "k8s: add pod
log reader" -->

### Description

- Match StepperContainer and StepContainer heights.

<!-- [OPTIONAL] Include screenshots below for frontend changes. -->
**Before**
<img
src="https://github.com/user-attachments/assets/e4a59891-ce53-432e-8ca0-18532c98ce35"
width="480" />

**After**
<img
src="https://github.com/user-attachments/assets/cf169308-2c83-4c1c-b92c-62a7d9d27875"
width="480" />

### Testing Performed
Manual
---
 frontend/packages/wizard/src/wizard.tsx                  | 9 ++++++---
 .../tests/__snapshots__/reboot-instance.test.tsx.snap    | 8 ++++----
 .../ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap | 8 ++++----
 .../tests/__snapshots__/terminate-instance.test.tsx.snap | 8 ++++----
 .../src/tests/__snapshots__/remote-triage.test.tsx.snap  | 8 ++++----
 .../k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap | 8 ++++----
 .../k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap | 8 ++++----
 .../tests/__snapshots__/scale-resources.test.tsx.snap    | 8 ++++----
 8 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/frontend/packages/wizard/src/wizard.tsx b/frontend/packages/wizard/src/wizard.tsx
index 60c770b6b9..812970d98c 100644
--- a/frontend/packages/wizard/src/wizard.tsx
+++ b/frontend/packages/wizard/src/wizard.tsx
@@ -71,8 +71,8 @@ const Header = styled(Grid)<{ $orientation: MuiStepperProps["orientation"] }>(
 
 const Container = styled(MuiContainer)<{ $width: ContainerProps["width"] }>(
   {
-    padding: "32px",
-    height: "100%",
+    paddingBlock: "24px 32px",
+    height: "calc(100% - 56px)",
   },
   props => ({
     width: props.$width === "full" ? "100%" : "800px",
@@ -104,6 +104,8 @@ const StyledStepContainer = styled(Grid)({
 const StyledPaper = styled(Paper)(({ theme }: { theme: Theme }) => ({
   boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[600], 0.2)}`,
   padding: "32px",
+  maxHeight: "100%",
+  overflowY: "scroll",
 }));
 
 const Wizard = ({
@@ -234,7 +236,7 @@ const Wizard = ({
 
   return (
     <Container $width={width} maxWidth={false} className={className}>
-      <MaxHeightGrid container alignItems="stretch" spacing={2}>
+      <MaxHeightGrid container alignItems="stretch">
         {heading && (
           <Header item $orientation={orientation}>
             {React.isValidElement(heading) ? (
@@ -250,6 +252,7 @@ const Wizard = ({
           direction={orientation === "vertical" ? "row" : "column"}
           wrap="nowrap"
           spacing={2}
+          marginTop={0}
         >
           <StepperContainer item xs="auto" $orientation={orientation}>
             <Stepper activeStep={state.activeStep} orientation={orientation}>
diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
index fbdb53f202..e85583523d 100644
--- a/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
+++ b/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
index b16c4c3ac4..a84b2d6139 100644
--- a/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
+++ b/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
index fbdb53f202..e85583523d 100644
--- a/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
+++ b/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
diff --git a/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap b/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
index 01cb5af671..f92055aa13 100644
--- a/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
+++ b/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -100,7 +100,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
index fbdb53f202..e85583523d 100644
--- a/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
+++ b/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
index b16c4c3ac4..a84b2d6139 100644
--- a/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
+++ b/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
index 0fcb0f89b1..047ba62843 100644
--- a/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
+++ b/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1ylvkhp-MuiContainer-root"
+    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-jaq6nv-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-lvrko9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-mwk3cp-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-omj7fc-MuiGrid-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1lwj3w1-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-55fo0g-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-e7v8dc-MuiPaper-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"