diff --git a/src/components/shared/wizard/WizardStepper.tsx b/src/components/shared/wizard/WizardStepper.tsx index 051fc94525..a884c1e8f3 100644 --- a/src/components/shared/wizard/WizardStepper.tsx +++ b/src/components/shared/wizard/WizardStepper.tsx @@ -4,6 +4,7 @@ import cn from "classnames"; import { Step, StepButton, StepLabel, Stepper } from "@mui/material"; import { isSummaryReachable, + useStepLabelStyles, useStepperStyle, } from "../../../utils/wizardUtils"; import CustomStepIcon from "./CustomStepIcon"; @@ -38,7 +39,8 @@ const WizardStepper = ({ const { t } = useTranslation(); const dispatch = useAppDispatch(); - const classes = useStepperStyle(); + const stepperClasses = useStepperStyle(); + const labelClasses = useStepLabelStyles(); const handleOnClick = async (key: number) => { if (isSummaryReachable(key, steps, completed)) { @@ -67,13 +69,13 @@ const WizardStepper = ({ alternativeLabel // @ts-expect-error TS(2322): Type 'boolean' is not assignable to type 'ReactEle... Remove this comment to see the full error message connector={false} - className={cn("step-by-step", classes.root)} + className={cn("step-by-step", stepperClasses.root)} > {steps.map((label, key) => !label.hidden ? ( handleOnClick(key)} disabled={disabled}> - + {t(label.translation)} diff --git a/src/components/shared/wizard/WizardStepperEvent.tsx b/src/components/shared/wizard/WizardStepperEvent.tsx index 1fc51d67e3..1d2c36e483 100644 --- a/src/components/shared/wizard/WizardStepperEvent.tsx +++ b/src/components/shared/wizard/WizardStepperEvent.tsx @@ -4,6 +4,7 @@ import cn from "classnames"; import { Step, StepButton, StepLabel, Stepper } from "@mui/material"; import { isSummaryReachable, + useStepLabelStyles, useStepperStyle, } from "../../../utils/wizardUtils"; import CustomStepIcon from "./CustomStepIcon"; @@ -30,7 +31,8 @@ const WizardStepperEvent = ({ }) => { const { t } = useTranslation(); - const classes = useStepperStyle(); + const stepperClasses = useStepperStyle(); + const labelClasses = useStepLabelStyles(); const handleOnClick = async (key: number) => { if (isSummaryReachable(key, steps, completed)) { @@ -60,13 +62,13 @@ const WizardStepperEvent = ({ alternativeLabel // @ts-expect-error TS(2322): Type 'boolean' is not assignable to type 'ReactEle... Remove this comment to see the full error message connector={false} - className={cn("step-by-step", classes.root)} + className={cn("step-by-step", stepperClasses.root)} > {steps.map((label, key) => !label.hidden ? ( handleOnClick(key)}> - + {t(label.translation)} diff --git a/src/utils/wizardUtils.ts b/src/utils/wizardUtils.ts index ab8e697285..d682b65001 100644 --- a/src/utils/wizardUtils.ts +++ b/src/utils/wizardUtils.ts @@ -9,6 +9,13 @@ export const useStepperStyle = makeStyles({ }, }); +// Properly align multi-line wizard step labels +export const useStepLabelStyles = makeStyles({ + root: { + alignSelf: "flex-start", + }, +}); + // Style of icons used in Stepper type stepIconStyleProps = { active: boolean,