fix: Kanban | Cards are broken when toogle FullWidth Mode

ever-co · Dec 8, 2024 · 43b94f3 · 43b94f3
1 parent 88fc30c
commit 43b94f3
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 45 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -31,6 +31,7 @@ import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { CircleIcon } from 'lucide-react';
 import { XMarkIcon } from '@heroicons/react/20/solid';
+import { cn } from '@/lib/utils';
 
 const Kanban = () => {
 	const {
@@ -161,11 +162,10 @@ const Kanban = () => {
 										<div
 											key={tab.name}
 											onClick={() => setActiveTab(tab.value)}
-											className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
-												activeTab === tab.value
-													? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
-													: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
-											}`}
+											className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value
+												? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
+												: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
+												}`}
 											style={{
 												borderBottomWidth: '3px',
 												borderBottomStyle: 'solid'
@@ -259,18 +259,22 @@ const Kanban = () => {
 				}
 			>
 				{/** TODO:fetch teamtask based on days */}
+
+
 				<div className="pt-10">
 					{activeTab &&
 						(Object.keys(data).length > 0 ? (
-							<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
+							<Container fullWidth={fullWidth} className={cn("!pt-0 px-5")}>
+								<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
+							</Container>
 						) : (
 							// add filter for today, yesterday and tomorrow
 							<div className="flex flex-col flex-1 w-full h-full">
 								<KanbanBoardSkeleton />
 							</div>
 						))}
 				</div>
-			</MainLayout>
+			</MainLayout >
 			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -2,7 +2,6 @@ import { useTaskStatus } from '@app/hooks';
 import { useKanban } from '@app/hooks/features/useKanban';
 import { ITaskStatusItemList, ITeamTask } from '@app/interfaces';
 import { IKanban } from '@app/interfaces/IKanban';
-import { fullWidthState } from '@app/stores/fullWidth';
 import KanbanDraggable, { EmptyKanbanDroppable } from 'lib/components/Kanban';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import {
@@ -13,7 +12,6 @@ import {
 	DroppableProvided,
 	DroppableStateSnapshot
 } from 'react-beautiful-dnd';
-import { useAtomValue } from 'jotai';
 import { ScrollArea, ScrollBar } from '@components/ui/scroll-area';
 import { cn } from '../utils';
 
@@ -38,7 +36,6 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
 			};
 		})
 	);
-	const fullWidth = useAtomValue(fullWidthState);
 	const containerRef = useRef<HTMLDivElement>(null);
 	const { taskStatus: ts } = useTaskStatus();
 	const reorderTask = (list: ITeamTask[], startIndex: number, endIndex: number) => {
@@ -201,7 +198,7 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
 
 	return (
 		<ScrollArea
-			className="max-w-[82svw] w-full relative bg-transparent dark:bg-[#181920] min-h-svh h-svh px-5"
+			className="max-w-[95svw] w-full relative bg-transparent dark:bg-[#181920] min-h-svh h-svh px-3"
 			ref={containerRef}
 		>
 			<div className="w-max">
@@ -213,46 +210,46 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
 									className={cn(
 										'flex flex-1 flex-row gap-2 min-h-fit px-8 lg:px-0 w-full h-full',
 										snapshot.isDraggingOver ? 'bg-slate-200 dark:bg-slate-800' : '',
-										!fullWidth && 'x-container pl-0'
+										// !fullWidth && 'x-contane pl-0'
 									)}
 									ref={provided.innerRef}
 									{...provided.droppableProps}
 								>
 									{columns.length > 0
 										? columns.map((column: any, index: number) => (
-												<Fragment key={index}>
-													{isColumnCollapse(column.name) ? (
-														<EmptyKanbanDroppable
-															index={index}
-															title={column.name}
-															status={column}
-															setColumn={setColumn}
-															items={items[column.name]}
-															backgroundColor={getHeaderBackground(
-																kanbanColumns,
-																column.name
-															)}
-														/>
-													) : (
-														<KanbanDraggable
-															key={index}
-															status={column}
-															setColumn={setColumn}
-															isLoading={isLoading}
-															index={index}
-															icon={column.icon}
-															addNewTask={addNewTask}
-															title={column.name}
-															items={items[column.name]}
-															backgroundColor={getHeaderBackground(
-																kanbanColumns,
-																column.name
-															)}
-															containerRef={containerRef}
-														/>
-													)}
-												</Fragment>
-											))
+											<Fragment key={index}>
+												{isColumnCollapse(column.name) ? (
+													<EmptyKanbanDroppable
+														index={index}
+														title={column.name}
+														status={column}
+														setColumn={setColumn}
+														items={items[column.name]}
+														backgroundColor={getHeaderBackground(
+															kanbanColumns,
+															column.name
+														)}
+													/>
+												) : (
+													<KanbanDraggable
+														key={index}
+														status={column}
+														setColumn={setColumn}
+														isLoading={isLoading}
+														index={index}
+														icon={column.icon}
+														addNewTask={addNewTask}
+														title={column.name}
+														items={items[column.name]}
+														backgroundColor={getHeaderBackground(
+															kanbanColumns,
+															column.name
+														)}
+														containerRef={containerRef}
+													/>
+												)}
+											</Fragment>
+										))
 										: null}
 									{provided.placeholder as React.ReactElement}
 								</div>