Merge pull request #3019 from ever-co/2991-improvement-team-member-ca…

…rd--table-view fix overlap on team member card| table view
ever-co · Sep 17, 2024 · 521fe7a · 521fe7a
2 parents 8f3fd05 + f3988ea
commit 521fe7a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 49 deletions.
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
@@ -78,17 +78,17 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 											style={{
 												textAlign: index === 0 ? 'left' : 'center'
 											}}
-											className="!w-40  text-base"
+											className="!w-40 text-base"
 											key={header.id}
 										>
 											<Tooltip label={isTooltip as string} className="" enabled={!!isTooltip}>
 												<div className="">
 													{header.isPlaceholder
 														? null
 														: flexRender(
-															header.column.columnDef.header,
-															header.getContext()
-														)}
+																header.column.columnDef.header,
+																header.getContext()
+															)}
 												</div>
 											</Tooltip>
 										</TableHead>
@@ -98,32 +98,39 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 						))}
 					</TableHeader>
 				)}
-				<div className="mt-8 "></div>
+				<div className="mt-8"></div>
 				<TableBody className="divide-y h-40 overflow-y-auto divide-gray-200 bg-light--theme-light dark:bg-dark--theme-light">
 					{table.getRowModel().rows?.length ? (
-						table.getRowModel().rows.map((row, i) => (
-							<TableRow
-								key={row.id}
-								data-state={row.getIsSelected() && 'selected'}
-								className={clsxm(
-									'my-4 hover:bg-[#00000008] dark:hover:bg-[#26272C]/40',
-									i == 1 && 'max-w-[615px]'
-								)}
-							>
-								{row.getVisibleCells().map((cell, index) => (
-									<TableCell
-										key={cell.id}
-										style={{
-											textAlign: index === 0 ? 'left' : 'center'
-										}}
-										// className="!w-36"
-										className="my-4 !w-fit xl:!w-fit border-r border-b border-[#00000008] border-[0.125rem] dark:border-[#26272C] "
-									>
-										{flexRender(cell.column.columnDef.cell, cell.getContext())}
-									</TableCell>
-								))}
-							</TableRow>
-						))
+						table.getRowModel().rows.map((row, i) => {
+							return (
+								<TableRow
+									key={row.id}
+									data-state={row.getIsSelected() && 'selected'}
+									className={clsxm(
+										'my-4 hover:bg-[#00000008] dark:hover:bg-[#26272C]/40',
+										i == 1 && 'max-w-[615px]'
+									)}
+								>
+									{row.getVisibleCells().map((cell, index) => {
+										return (
+											<TableCell
+												key={cell.id}
+												style={{
+													textAlign: index === 0 ? 'left' : 'center',
+													width: index === 4 ? '2rem' : '13rem'
+												}}
+												// className="!w-36"
+												className={clsxm(
+													'my-4 border-r border-b border-[#00000008] border-[0.125rem] dark:border-[#26272C]'
+												)}
+											>
+												{flexRender(cell.column.columnDef.cell, cell.getContext())}
+											</TableCell>
+										);
+									})}
+								</TableRow>
+							);
+						})
 					) : (
 						<TableRow>
 							<TableCell colSpan={columns.length} className="h-24 text-center">

diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
@@ -57,11 +57,7 @@ TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
 	({ className, ...props }, ref) => (
-		<td
-			ref={ref}
-			className={clsxm('p-4 align-middle [&:has([role=checkbox])]:pr-0 !w-full', className)}
-			{...props}
-		/>
+		<td ref={ref} className={clsxm('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
 	)
 );
 TableCell.displayName = 'TableCell';

diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
@@ -24,8 +24,8 @@ export function TaskCell({ row }: { row: any }) {
 			edition={taskEdition}
 			memberInfo={memberInfo}
 			className={clsxm(
-				'flex-1 flex justify-center items-center  w-full px-2',
-				fullWidth ? 'max-w-[40vw]' : 'max-w-[30vw]'
+				'flex-1 flex justify-center items-center px-2',
+				fullWidth ? 'max-w-[40rem]' : 'max-w-[30rem]'
 			)}
 			publicTeam={publicTeam}
 		/>
@@ -38,24 +38,20 @@ export function UserInfoCell({ cell }: { cell: any }) {
 	const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
 	const memberInfo = useTeamMemberCard(member);
 
-	return <UserInfo memberInfo={memberInfo} className="" publicTeam={publicTeam} />;
+	return <UserInfo memberInfo={memberInfo} className="w-fit" publicTeam={publicTeam} />;
 }
 
 export function WorkedOnTaskCell({ row }: { row: any }) {
 	const member = row.original as OT_Member;
 	const memberInfo = useTeamMemberCard(member);
-	const fullWidth = useRecoilValue(fullWidthState);
 
 	return (
 		<TaskTimes
 			activeAuthTask={true}
 			memberInfo={memberInfo}
 			task={memberInfo.memberTask}
 			isAuthUser={memberInfo.isAuthUser}
-			className={clsxm(
-				'flex flex-col justify-center items-center mx-auto',
-				fullWidth ? '2xl:w-[7rem] 3xl:w-[11rem]' : '2xl:w-[7rem]  3xl:w-[10rem]'
-			)}
+			className={clsxm('flex flex-col justify-center items-center mx-auto')}
 		/>
 	);
 }
@@ -70,9 +66,7 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className={clsxm(
-				'flex flex-col justify-center items-center 2xl:w-[7rem]  3xl:w-[10rem]'
-			)}
+			className={clsxm('flex flex-col justify-center items-center')}
 		/>
 	);
 }

diff --git a/apps/web/lib/features/team/user-team-card/task-estimate.tsx b/apps/web/lib/features/team/user-team-card/task-estimate.tsx
@@ -34,7 +34,7 @@ export function TaskEstimateInfo({ className, activeAuthTask, showTime = true, r
 
 	return (
 		<div className={className}>
-			<div className="flex items-center flex-col gap-y-[2rem] justify-center">
+			<div className="flex items-center flex-col gap-y-[2rem] min-w-[3.3rem] justify-center">
 				{showTime && (
 					<div className="flex space-x-2 items-center font-normal lg:text-sm text-xs">
 						<span className={clsxm('text-gray-500', hasEditMode && ['hidden'])}>

diff --git a/apps/web/lib/features/team/user-team-card/task-info.tsx b/apps/web/lib/features/team/user-team-card/task-info.tsx
@@ -19,9 +19,8 @@ export function TaskInfo({ className, memberInfo, edition, publicTeam, tab, dayP
 
 			<div
 				className={clsxm(
-					'h-full w-full flex flex-col items-start justify-start gap-[1.0620rem] max-h-full overflow-hidden',
-					className,
-					'!min-w-[461px] !max-w-[461px]'
+					'h-full min-w-[20rem] w-fit flex flex-col items-start justify-start gap-[1.0620rem] max-h-full overflow-hidden',
+					className
 				)}
 			>
 				{/* task */}

diff --git a/apps/web/lib/features/team/user-team-card/user-info.tsx b/apps/web/lib/features/team/user-team-card/user-info.tsx
@@ -33,7 +33,7 @@ export function UserInfo({ className, memberInfo, publicTeam = false }: Props) {
 	return (
 		<Link
 			href={publicTeam ? '#' : `/profile/${memberInfo.memberUser?.id}?name=${fullname}`}
-			className={clsxm('flex items-center lg:space-x-4 space-x-2', className)}
+			className={clsxm('flex items-center lg:space-x-4 space-x-2 w-fit', className)}
 		>
 			<div
 				className={clsxm(