From 5653b89114e00ddb50a0f90dc21aa650ef17c5fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Fri, 1 Sep 2023 11:54:34 +0200
Subject: [PATCH] fix: fix filter and sort position on board horizontal scroll
 (#1386)

Closes #1354
---
 .../ui/board/components/EntityBoard.tsx       | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx
index 57c95553c..73764bad1 100644
--- a/front/src/modules/ui/board/components/EntityBoard.tsx
+++ b/front/src/modules/ui/board/components/EntityBoard.tsx
@@ -30,8 +30,10 @@ import { BoardOptions } from '../types/BoardOptions';
 
 import { EntityBoardColumn } from './EntityBoardColumn';
 
-const StyledCustomScrollWrapper = styled(ScrollWrapper)`
+const StyledWrapper = styled.div`
+  display: flex;
   flex-direction: column;
+  width: 100%;
 `;
 
 export function EntityBoard({
@@ -105,7 +107,7 @@ export function EntityBoard({
   const boardRef = useRef<HTMLDivElement>(null);
 
   return (boardColumns?.length ?? 0) > 0 ? (
-    <StyledCustomScrollWrapper>
+    <StyledWrapper>
       <BoardHeader
         viewName="All opportunities"
         viewIcon={<IconList size={theme.icon.size.md} />}
@@ -113,29 +115,31 @@ export function EntityBoard({
         onSortsUpdate={updateSorts}
         context={CompanyBoardRecoilScopeContext}
       />
-      <StyledBoard ref={boardRef}>
-        <DragDropContext onDragEnd={onDragEnd}>
-          {sortedBoardColumns.map((column) => (
-            <BoardColumnIdContext.Provider value={column.id} key={column.id}>
-              <RecoilScope
-                SpecificContext={BoardColumnRecoilScopeContext}
-                key={column.id}
-              >
-                <EntityBoardColumn
-                  boardOptions={boardOptions}
-                  column={column}
-                  onEditColumnTitle={onEditColumnTitle}
-                />
-              </RecoilScope>
-            </BoardColumnIdContext.Provider>
-          ))}
-        </DragDropContext>
-      </StyledBoard>
+      <ScrollWrapper>
+        <StyledBoard ref={boardRef}>
+          <DragDropContext onDragEnd={onDragEnd}>
+            {sortedBoardColumns.map((column) => (
+              <BoardColumnIdContext.Provider value={column.id} key={column.id}>
+                <RecoilScope
+                  SpecificContext={BoardColumnRecoilScopeContext}
+                  key={column.id}
+                >
+                  <EntityBoardColumn
+                    boardOptions={boardOptions}
+                    column={column}
+                    onEditColumnTitle={onEditColumnTitle}
+                  />
+                </RecoilScope>
+              </BoardColumnIdContext.Provider>
+            ))}
+          </DragDropContext>
+        </StyledBoard>
+      </ScrollWrapper>
       <DragSelect
         dragSelectable={boardRef}
         onDragSelectionChange={setCardSelected}
       />
-    </StyledCustomScrollWrapper>
+    </StyledWrapper>
   ) : (
     <></>
   );