Fix UGN-314 make RSI usable on mobile

Author: masiulis

src/steps/Steps.tsx

@@ -16,7 +16,7 @@ export const Steps = () => {
 
   return (
     <>
-      <ModalHeader>
+      <ModalHeader display={["none", "none", "block"]}>
         <Stepper activeStep={activeStep} checkIcon={CheckIcon}>
           {steps.map((key) => (
             <Step label={translations[key].title} key={key} />

src/steps/ValidationStep/ValidationStep.tsx

@@ -113,9 +113,9 @@ export const ValidationStep = <T extends string>({ initialData }: Props<T>) => {
         }}
       />
       <ModalBody pb={0}>
-        <Box display="flex" justifyContent="space-between" alignItems="center" mb="2rem">
+        <Box display="flex" justifyContent="space-between" alignItems="center" mb="2rem" flexWrap="wrap" gap="8px">
           <Heading sx={styles.heading}>{translations.validationStep.title}</Heading>
-          <Box display="flex" gap="16px" alignItems="center">
+          <Box display="flex" gap="16px" alignItems="center" flexWrap="wrap">
             <Button variant="outline" size="sm" onClick={deleteSelectedRows}>
               {translations.validationStep.discardButtonTitle}
             </Button>