Fixed SignInUp Modal misalignment for devices smaller than 400px width (#6386)

Hi @Bonapara,
Issue #6385 

I encountered an issue with the Modal component where its width was
fixed at 400px. While the container housing the Modal adjusted its size
based on the screen width, the Modal itself remained at 400px regardless
of the screen size.

I have implemented a change to address this problem. Could you please
review the changes and let me know your thoughts?

Thank you!




https://github.com/user-attachments/assets/8358aacb-d6c3-440e-895e-7abc4f8a3534

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ModalCloseButton } from './ModalCloseButton';
 
 const StyledModal = styled(Modal)`
@@ -16,7 +16,7 @@ const StyledModal = styled(Modal)`
     min-width: auto;
     min-height: auto;
     width: 100%;
-    height: 100%;
+    height: 80%;
   }
 `;
 
@@ -40,11 +40,15 @@ export const ModalWrapper = ({
   const { rtl } = useSpreadsheetImportInternal();
 
   return (
-    <StyledModal isOpen={isOpen} size="large">
-      <StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
-        <ModalCloseButton onClose={onClose} />
-        {children}
-      </StyledRtlLtr>
-    </StyledModal>
+    <>
+      {isOpen && (
+        <StyledModal size="large" onClose={onClose} isClosable={true}>
+          <StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
+            <ModalCloseButton onClose={onClose} />
+            {children}
+          </StyledRtlLtr>
+        </StyledModal>
+      )}
+    </>
   );
 };

packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
+
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -14,8 +14,8 @@ import { setSubColumn } from '@/spreadsheet-import/utils/setSubColumn';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ColumnGrid } from './components/ColumnGrid';
 import { TemplateColumn } from './components/TemplateColumn';
 import { UserTableColumn } from './components/UserTableColumn';

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx

@@ -4,8 +4,8 @@ import { useCallback, useState } from 'react';
 import { Heading } from '@/spreadsheet-import/components/Heading';
 import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
 import { ImportedRow } from '@/spreadsheet-import/types';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { SelectHeaderTable } from './components/SelectHeaderTable';
 
 const StyledHeading = styled(Heading)`

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { useCallback, useState } from 'react';
 
 import { Heading } from '@/spreadsheet-import/components/Heading';
 import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
 import { Radio } from '@/ui/input/components/Radio';
 import { RadioGroup } from '@/ui/input/components/RadioGroup';
+
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
 const StyledContent = styled(Modal.Content)`

packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx

@@ -3,10 +3,11 @@ import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { Modal } from '@/ui/layout/modal/components/Modal';
+
 import { StepBar } from '@/ui/navigation/step-bar/components/StepBar';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { UploadFlow } from './UploadFlow';
 
 const StyledHeader = styled(Modal.Header)`

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx

@@ -10,8 +10,8 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { Columns, MatchColumnsStep } from './MatchColumnsStep/MatchColumnsStep';
 import { SelectHeaderStep } from './SelectHeaderStep/SelectHeaderStep';
 import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx

@@ -1,9 +1,8 @@
-import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { useCallback, useState } from 'react';
 import { WorkBook } from 'xlsx-ugnis';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
-
 import { DropZone } from './components/DropZone';
 
 const StyledContent = styled(Modal.Content)`

packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -20,9 +20,9 @@ import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { Button } from '@/ui/input/button/components/Button';
 import { Toggle } from '@/ui/input/components/Toggle';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isDefined } from '~/utils/isDefined';
 
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { generateColumns } from './components/columns';
 import { ImportedStructuredRowMetadata } from './types';