Fix/csv import (#1397)

* feat: add ability to enable or disable header selection

* feat: limit to max of 200 records for now

* fix: bigger modal

* feat: add missing standard fields for company

* fix: person fields

* feat: add hotkeys on dialog

* feat: mobile device

* fix: company import error

* fix: csv import crash

* fix: use scoped hotkey

front/src/modules/ui/step-bar/components/Step.tsx

@@ -3,11 +3,16 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
 import { AnimatedCheckmark } from '@/ui/checkmark/components/AnimatedCheckmark';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 const StyledContainer = styled.div<{ isLast: boolean }>`
   align-items: center;
   display: flex;
   flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    flex-grow: 0;
+  }
 `;
 
 const StyledStepCircle = styled(motion.div)`
@@ -64,6 +69,7 @@ export const Step = ({
   children,
 }: StepProps) => {
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   const variantsCircle = {
     active: {
@@ -104,7 +110,7 @@ export const Step = ({
         {!isActive && <StyledStepIndex>{index + 1}</StyledStepIndex>}
       </StyledStepCircle>
       <StyledStepLabel isActive={isActive}>{label}</StyledStepLabel>
-      {!isLast && (
+      {!isLast && !isMobile && (
         <StyledStepLine
           variants={variantsLine}
           animate={isActive ? 'active' : 'inactive'}

front/src/modules/ui/step-bar/components/StepBar.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
 import { Step, StepProps } from './Step';
 
 const StyledContainer = styled.div`
   display: flex;
   flex: 1;
   justify-content: space-between;
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    align-items: center;
+    justify-content: center;
+  }
 `;
 
 export type StepsProps = React.PropsWithChildren &
@@ -15,6 +22,8 @@ export type StepsProps = React.PropsWithChildren &
   };
 
 export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
+  const isMobile = useIsMobile();
+
   return (
     <StyledContainer {...restProps}>
       {React.Children.map(children, (child, index) => {
@@ -29,6 +38,14 @@ export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
           return child;
         }
 
+        // We should only render the active step, and if activeStep is -1, we should only render the first step only when it's mobile device
+        if (
+          isMobile &&
+          (activeStep === -1 ? index !== 0 : index !== activeStep)
+        ) {
+          return null;
+        }
+
         return React.cloneElement<StepProps>(child as any, {
           index,
           isActive: index <= activeStep,