Fix bugs on pipeline new card creation and checkboxes not scrollable

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

@@ -1,35 +0,0 @@
-import { useCallback } from 'react';
-
-import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
-import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
-import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
-
-import { useFilteredSearchCompanyQuery } from '../queries';
-
-export function NewCompanyBoardCard() {
-  const [searchFilter] = useRecoilScopedState(
-    relationPickerSearchFilterScopedState,
-  );
-
-  const companies = useFilteredSearchCompanyQuery({ searchFilter });
-
-  const handleEntitySelect = useCallback(async (companyId: string) => {
-    return;
-  }, []);
-
-  function handleCancel() {
-    return;
-  }
-
-  return (
-    <SingleEntitySelect
-      onEntitySelected={(value) => handleEntitySelect(value.id)}
-      onCancel={handleCancel}
-      entities={{
-        entitiesToSelect: companies.entitiesToSelect,
-        selectedEntity: companies.selectedEntities[0],
-        loading: companies.loading,
-      }}
-    />
-  );
-}

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

@@ -96,18 +96,16 @@ export function NewCompanyProgressButton() {
   return (
     <>
       {isCreatingCard ? (
-        <RecoilScope>
-          <SingleEntitySelect
-            onEntitySelected={(value) => handleEntitySelect(value)}
-            onCancel={handleCancel}
-            entities={{
-              entitiesToSelect: companies.entitiesToSelect,
-              selectedEntity: companies.selectedEntities[0],
-              loading: companies.loading,
-            }}
-            disableBackgroundBlur={true}
-          />
-        </RecoilScope>
+        <SingleEntitySelect
+          onEntitySelected={(value) => handleEntitySelect(value)}
+          onCancel={handleCancel}
+          entities={{
+            entitiesToSelect: companies.entitiesToSelect,
+            selectedEntity: companies.selectedEntities[0],
+            loading: companies.loading,
+          }}
+          disableBackgroundBlur={true}
+        />
       ) : (
         <NewButton onClick={handleNewClick} />
       )}

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

@@ -1,9 +1,14 @@
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
 import { NewCompanyProgressButton } from '@/companies/components/NewCompanyProgressButton';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 
 import { BoardOptions } from '../../pipeline-progress/types/BoardOptions';
 
 export const companyBoardOptions: BoardOptions = {
-  newCardComponent: <NewCompanyProgressButton />,
+  newCardComponent: (
+    <RecoilScope>
+      <NewCompanyProgressButton />
+    </RecoilScope>
+  ),
   cardComponent: <CompanyBoardCard />,
 };

front/src/modules/ui/components/form/Checkbox.tsx

@@ -12,6 +12,7 @@ type OwnProps = {
 const StyledInputContainer = styled.div`
   align-items: center;
   display: flex;
+  position: relative;
 `;
 
 const StyledInput = styled.input<{ indeterminate?: boolean }>`