From 61170ae68ae96c5adb89db794fdbd89dae15ab94 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Sun, 8 Dec 2024 19:27:33 +0200
Subject: [PATCH] fix: fix header scroll and card items in the table view - all
 teams page (#3400)

---
 apps/web/app/[locale]/all-teams/component.tsx | 84 ++++++++++---------
 .../all-teams/users-teams-card/user-card.tsx  | 14 ++--
 2 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/apps/web/app/[locale]/all-teams/component.tsx b/apps/web/app/[locale]/all-teams/component.tsx
index 184a9a59f..a62530752 100644
--- a/apps/web/app/[locale]/all-teams/component.tsx
+++ b/apps/web/app/[locale]/all-teams/component.tsx
@@ -5,7 +5,7 @@ import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container } from 'lib/components';
-import { MainHeader, MainLayout } from 'lib/layout';
+import { MainLayout } from 'lib/layout';
 import { useOrganizationAndTeamManagers } from '@app/hooks/features/useOrganizationTeamManagers';
 import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
@@ -18,55 +18,57 @@ import { MemberFilter } from 'lib/features/all-teams/all-team-members-filter';
 import { useOrganizationTeams } from '@app/hooks';
 
 function AllTeamsPage() {
-  const t = useTranslations();
-  const fullWidth = useAtomValue(fullWidthState);
-  const view = useAtomValue(allTeamsHeaderTabs);
-  const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
-  const { isTrackingEnabled } = useOrganizationTeams();
+	const t = useTranslations();
+	const fullWidth = useAtomValue(fullWidthState);
+	const view = useAtomValue(allTeamsHeaderTabs);
+	const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
+	const { isTrackingEnabled } = useOrganizationTeams();
 
-  const breadcrumb = [
-    { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-    { title: t('common.ALL_TEAMS'), href: '/all-teams' }
-  ];
+	const breadcrumb = [
+		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+		{ title: t('common.ALL_TEAMS'), href: '/all-teams' }
+	];
 
-  /* If the user is not a manager in any team or if he's
+	/* If the user is not a manager in any team or if he's
 		manager in only one team, then redirect him to the home page
 	*/
-  if (userManagedTeams.length < 2) return <RedirectUser />;
+	if (userManagedTeams.length < 2) return <RedirectUser />;
 
-  return (
-    <MainLayout showTimer={isTrackingEnabled} className="items-start">
-      <MainHeader
-        fullWidth={fullWidth}
-        className={'pb-2 pt-10 sticky top-20 z-50'}
-      >
-        {/* Breadcrumb */}
-        <div className="flex flex-row items-start justify-between mb-5">
-          <Breadcrumb paths={breadcrumb} className="text-sm" />
-          <div className="flex flex-col items-end gap-2">
-            <div className="flex items-center justify-center h-10 gap-1 w-max">
-              <HeaderTabs />
-            </div>
-            <MemberFilter />
-          </div>
-        </div>
-        <TeamMemberHeader view={IssuesView.CARDS} />
-      </MainHeader>
-      <Container fullWidth={fullWidth} className="flex py-10 pt-20">
-        <AllTeamsMembers teams={filteredTeams} view={view} />
-      </Container>
-    </MainLayout>
-  );
+	return (
+		<MainLayout
+			showTimer={isTrackingEnabled}
+			className="items-start"
+			mainHeaderSlot={
+				<div className="flex w-full flex-col items-start  justify-between">
+					<div className="w-full flex items-center justify-between py-2 px-4">
+						<Breadcrumb paths={breadcrumb} className="text-sm" />
+						<div className="flex self-end items-center gap-2">
+							<div className="flex items-center justify-center h-10 gap-1 w-max">
+								<HeaderTabs />
+							</div>
+							<MemberFilter />
+						</div>
+					</div>
+
+					{view == IssuesView.CARDS && <TeamMemberHeader view={IssuesView.CARDS} />}
+				</div>
+			}
+		>
+			<Container fullWidth={fullWidth} className="mx-auto mt-5">
+				<AllTeamsMembers teams={filteredTeams} view={view} />
+			</Container>
+		</MainLayout>
+	);
 }
 
 function RedirectUser() {
-  const router = useRouter();
-  useEffect(() => {
-    router.push('/');
-  }, [router]);
-  return <></>;
+	const router = useRouter();
+	useEffect(() => {
+		router.push('/');
+	}, [router]);
+	return <></>;
 }
 
 export default withAuthentication(AllTeamsPage, {
-  displayName: 'AllManagedTeams'
+	displayName: 'AllManagedTeams'
 });
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
index 1920fee16..7e922dc24 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
@@ -34,38 +34,38 @@ export default function UserTeamCard({
 					className
 				)}
 			>
-				<div className="relative flex items-center w-full m-0">
+				<div className="relative flex items-center justify-between w-full m-0">
 					<div className="absolute left-0 cursor-pointer w-fit">
 						<SixSquareGridIcon className="w-2 max-w-fit text-[#CCCCCC] dark:text-[#4F5662]" />
 					</div>
 					{/* User information */}
-					<div className="relative w-fit">
+					<div className="relative !w-[27%]">
 						<MemberInfo member={member} className="!w-fit" />
 					</div>
 
 					<VerticalSeparator />
 
 					{/* Task information */}
-					<div className="flex items-center justify-between flex-initial w-fit min-w-fit">
+					<div className=" !w-[25%]">
 						<UserTeamActiveTaskInfo
 							member={member}
 							className="flex-initial !w-fit !min-w-full !max-w-[280px]"
 						/>
 					</div>
 
-					<VerticalSeparator className="ml-2" />
+					<VerticalSeparator />
 
 					{/* Task worked Times */}
-					<UserTeamActiveTaskTimes member={member} className="!w-fit max-w-fit" />
+					<UserTeamActiveTaskTimes member={member} className=" !w-[15%]" />
 
 					<VerticalSeparator />
 
 					{/* Task estimate Info */}
-					<UserTeamActiveTaskEstimate member={member} className="!w-fit" />
+					<UserTeamActiveTaskEstimate member={member} className=" !w-[20%]" />
 
 					<VerticalSeparator />
 
-					<UserTeamActiveTaskTodayWorked member={member} className="!w-fit !max-w-fit" />
+					<UserTeamActiveTaskTodayWorked member={member} className=" !w-[8%]" />
 
 					{/* Card Menu */}
 					<div className="absolute hidden right-2">