Skip to content

Commit

Permalink
frontend: fix step container height to match stepper container (#3064)
Browse files Browse the repository at this point in the history 
<!--- 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
  • Loading branch information
@jorgeclaudiogonzalez-lyft
jorgeclaudiogonzalez-lyft authored Aug 5, 2024
1 parent 72f2cac commit 4bffb99
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 31 deletions.
9 changes: 6 additions & 3 deletions frontend/packages/wizard/src/wizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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 = ({
Expand Down Expand Up @@ -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) ? (
Expand All @@ -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}>
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 4bffb99

Please sign in to comment.