From 9da0a5df6f0f3d65428463fe794886d835e9f3f5 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 18:35:51 +0530
Subject: [PATCH] Fixed import modal content scroll bug (#9330)

fixes #9297
---
 .../MatchColumnsStep/MatchColumnsStep.tsx     | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
index 00d3fb999..b0e91ff8d 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
@@ -25,6 +25,7 @@ import { initialComputedColumnsSelector } from '@/spreadsheet-import/steps/compo
 import { UnmatchColumn } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn';
 import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilState } from 'recoil';
 import { ColumnGrid } from './components/ColumnGrid';
 import { TemplateColumn } from './components/TemplateColumn';
@@ -326,37 +327,43 @@ export const MatchColumnsStep = <T extends string>({
 
   return (
     <>
-      <StyledContent>
-        <Heading
-          title="Match Columns"
-          description="Select the correct field for each column you'd like to import."
-        />
-        <ColumnGrid
-          columns={columns}
-          renderUserColumn={(columns, columnIndex) => (
-            <UserTableColumn
-              column={columns[columnIndex]}
-              importedRow={dataExample.map(
-                (row) => row[columns[columnIndex].index],
-              )}
-            />
-          )}
-          renderTemplateColumn={(columns, columnIndex) => (
-            <TemplateColumn
-              columns={columns}
-              columnIndex={columnIndex}
-              onChange={onChange}
-            />
-          )}
-          renderUnmatchedColumn={(columns, columnIndex) => (
-            <UnmatchColumn
-              columns={columns}
-              columnIndex={columnIndex}
-              onSubChange={onSubChange}
-            />
-          )}
-        />
-      </StyledContent>
+      <ScrollWrapper
+        contextProviderName="modalContent"
+        componentInstanceId="scroll-wrapper-modal-content"
+        heightMode="full"
+      >
+        <StyledContent>
+          <Heading
+            title="Match Columns"
+            description="Select the correct field for each column you'd like to import."
+          />
+          <ColumnGrid
+            columns={columns}
+            renderUserColumn={(columns, columnIndex) => (
+              <UserTableColumn
+                column={columns[columnIndex]}
+                importedRow={dataExample.map(
+                  (row) => row[columns[columnIndex].index],
+                )}
+              />
+            )}
+            renderTemplateColumn={(columns, columnIndex) => (
+              <TemplateColumn
+                columns={columns}
+                columnIndex={columnIndex}
+                onChange={onChange}
+              />
+            )}
+            renderUnmatchedColumn={(columns, columnIndex) => (
+              <UnmatchColumn
+                columns={columns}
+                columnIndex={columnIndex}
+                onSubChange={onSubChange}
+              />
+            )}
+          />
+        </StyledContent>
+      </ScrollWrapper>
       <StepNavigationButton
         onClick={handleOnContinue}
         isLoading={isLoading}