Fix pipeline bug on scroll (#666)

* Fix pipeline bug on scroll

* Fix lint

* Fix lint

front/src/modules/companies/components/NewCompanyProgressButton.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
@@ -26,7 +26,6 @@ import {
 import { currentPipelineState } from '~/pages/opportunities/currentPipelineState';
 
 export function NewCompanyProgressButton() {
-  const containerRef = useRef<HTMLDivElement>(null);
   const [isCreatingCard, setIsCreatingCard] = useState(false);
   const [board, setBoard] = useRecoilState(boardState);
   const [pipeline] = useRecoilState(currentPipelineState);
@@ -112,24 +111,22 @@ export function NewCompanyProgressButton() {
 
   return (
     <>
-      {isCreatingCard && (
+      {isCreatingCard ? (
         <RecoilScope>
-          <div ref={containerRef}>
-            <div ref={containerRef}>
-              <SingleEntitySelect
-                onEntitySelected={(value) => handleEntitySelect(value)}
-                onCancel={handleCancel}
-                entities={{
-                  entitiesToSelect: companies.entitiesToSelect,
-                  selectedEntity: companies.selectedEntities[0],
-                  loading: companies.loading,
-                }}
-              />
-            </div>
-          </div>
+          <SingleEntitySelect
+            onEntitySelected={(value) => handleEntitySelect(value)}
+            onCancel={handleCancel}
+            entities={{
+              entitiesToSelect: companies.entitiesToSelect,
+              selectedEntity: companies.selectedEntities[0],
+              loading: companies.loading,
+            }}
+            disableBackgroundBlur={true}
+          />
         </RecoilScope>
+      ) : (
+        <NewButton onClick={handleNewClick} />
       )}
-      <NewButton onClick={handleNewClick} />
     </>
   );
 }

front/src/modules/pipeline-progress/components/EntityBoardColumn.tsx

@@ -18,6 +18,10 @@ const StyledPlaceholder = styled.div`
   min-height: 1px;
 `;
 
+const StyledNewCardButtonContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(40)};
+`;
+
 const BoardColumnCardsContainer = ({
   children,
   droppableProvided,
@@ -72,7 +76,9 @@ export function EntityBoardColumn({
               </RecoilScope>
             ))}
           </BoardColumnCardsContainer>
-          <RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
+          <StyledNewCardButtonContainer>
+            <RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
+          </StyledNewCardButtonContainer>
         </BoardColumn>
       )}
     </Droppable>

front/src/modules/pipeline-progress/queries/index.ts

@@ -21,7 +21,7 @@ export const GET_PIPELINES = gql`
 
 export const GET_PIPELINE_PROGRESS = gql`
   query GetPipelineProgress($where: PipelineProgressWhereInput) {
-    findManyPipelineProgress(where: $where) {
+    findManyPipelineProgress(where: $where, orderBy: { createdAt: asc }) {
       id
       progressableType
       progressableId

front/src/modules/relation-picker/components/SingleEntitySelect.tsx

@@ -30,11 +30,13 @@ export function SingleEntitySelect<
   onEntitySelected,
   onCreate,
   onCancel,
+  disableBackgroundBlur = false,
 }: {
   onCancel?: () => void;
   onCreate?: () => void;
   entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
   onEntitySelected: (entity: CustomEntityForSelect) => void;
+  disableBackgroundBlur?: boolean;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,7 +51,7 @@ export function SingleEntitySelect<
   });
 
   return (
-    <DropdownMenu ref={containerRef}>
+    <DropdownMenu disableBlur={disableBackgroundBlur} ref={containerRef}>
       <DropdownMenuSearch
         value={searchFilter}
         onChange={handleSearchFilterChange}

front/src/modules/ui/board/components/Board.tsx

@@ -5,7 +5,6 @@ export const StyledBoard = styled.div`
   border-radius: ${({ theme }) => theme.spacing(2)};
   display: flex;
   flex-direction: row;
-  height: calc(100%);
   overflow-x: auto;
   width: 100%;
 `;

front/src/modules/ui/board/components/NewButton.tsx

@@ -13,7 +13,6 @@ const StyledButton = styled.button`
   cursor: pointer;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
-  justify-content: center;
   padding: ${({ theme }) => theme.spacing(1)};
 
   &:hover {

front/src/modules/ui/components/menu/DropdownMenu.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenu = styled.div`
+export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
   align-items: center;
-  backdrop-filter: blur(20px);
+  backdrop-filter: ${({ disableBlur }) =>
+    disableBlur ? 'none' : 'blur(20px)'};
 
   background: ${({ theme }) => theme.background.transparent.secondary};
   border: 1px solid ${({ theme }) => theme.border.color.light};
@@ -14,7 +15,5 @@ export const DropdownMenu = styled.div`
 
   flex-direction: column;
 
-  height: fit-content;
-
   width: 200px;
 `;