Merge pull request #2209 from ever-co/2208-fix-kanban-scrolling

2208 fix kanban scrolling
ever-co · Feb 15, 2024 · ef3f336 · ef3f336
2 parents 0fd63ef + 7abf248
commit ef3f336
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 20 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -70,8 +70,12 @@ const Kanban = () => {
 	};
 	return (
 		<>
-			<MainLayout showTimer={true} footerClassName="hidden">
-				<div className={' flex flex-col bg-white dark:bg-dark--theme h-auto z-10 px-[32px] mx-[0px] w-full'}>
+			<MainLayout showTimer={true}>
+				<div
+					className={
+						' overflow-auto fixed flex flex-col bg-white dark:bg-dark--theme  z-10 px-[32px] mx-[0px] w-full'
+					}
+				>
 					<div className="flex flex-row items-start justify-between mt-12">
 						<div className="flex justify-center items-center gap-8 h-10">
 							<PeopleIcon className="stroke-dark dark:stroke-[#6b7280] h-6 w-6" />
@@ -172,13 +176,13 @@ const Kanban = () => {
 				<div>
 					{/** TODO:fetch teamtask based on days */}
 					{activeTab && ( // add filter for today, yesterday and tomorrow
-						<>
+						<div className="mt-72">
 							{Object.keys(data).length > 0 ? (
 								<KanbanView kanbanBoardTasks={data} />
 							) : (
 								<KanbanBoardSkeleton />
 							)}
-						</>
+						</div>
 					)}
 				</div>
 			</MainLayout>

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -1,11 +1,8 @@
 import { useKanban } from '@app/hooks/features/useKanban';
 import { ITaskStatus, ITaskStatusItemList, ITeamTask } from '@app/interfaces';
 import { IKanban } from '@app/interfaces/IKanban';
-import { fullWidthState } from '@app/stores/fullWidth';
 import { clsxm } from '@app/utils';
-import { Container, Divider } from 'lib/components';
 import KanbanDraggable, { EmptyKanbanDroppable } from 'lib/components/Kanban';
-import { Footer } from 'lib/layout';
 import React from 'react';
 import { useEffect, useState } from 'react';
 import {
@@ -16,7 +13,6 @@ import {
 	DroppableProvided,
 	DroppableStateSnapshot
 } from 'react-beautiful-dnd';
-import { useRecoilValue } from 'recoil';
 
 export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban }) => {
 	const {
@@ -28,7 +24,6 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 		reorderStatus,
 		addNewTask
 	} = useKanban();
-	const fullWidth = useRecoilValue(fullWidthState);
 	const [columns, setColumn] = useState<string[]>(Object.keys(kanbanBoardTasks));
 	const reorderTask = (list: ITeamTask[], startIndex: number, endIndex: number) => {
 		const tasks = Array.from(list);
@@ -187,10 +182,10 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 				{columns.length > 0 && (
 					<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
 						{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
-							<div className="flex flex-col justify-between min-h-[calc(100vh-_358px)] max-h-[calc(100vh-_358px)] overflow-x-auto w-full">
+							<div className="flex flex-col !h-[100vh-_300px] justify-between w-full">
 								<div
 									className={clsxm(
-										'flex flex-row h-fit p-[32px] bg-transparent dark:bg-[#181920]',
+										'flex flex-row  h-full p-[32px] bg-transparent dark:bg-[#181920]',
 										snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
 									)}
 									ref={provided.innerRef}
@@ -235,20 +230,12 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 									) : null}
 									<>{provided.placeholder}</>
 								</div>
-								<Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8')}>
-									<Divider />
-									<Footer className="justify-between px-0 w-full" />
-								</Container>
+
 							</div>
 						)}
 					</Droppable>
 				)}
 			</DragDropContext>
-			{/* <Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8')}>
-					<Divider />
-					<Footer className="justify-between px-0 w-full" />
-				</Container>
-			</div> */}
 		</>
 	);
 };