From 32da600d6e6f581cb23ca42fffc8ead1e09fc81f Mon Sep 17 00:00:00 2001
From: Arick Bulakali <arickbulakali@gmail.com>
Date: Tue, 12 Nov 2024 15:57:22 +0200
Subject: [PATCH] fix(web): [User Team Card] size and user team cart activity

---
 .../user-team-card-activity.tsx               | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx b/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx
index 0627568c9..557ee7b8f 100644
--- a/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx
+++ b/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx
@@ -31,18 +31,18 @@ const UserTeamActivity = ({ showActivity, member }: { showActivity: boolean; mem
 		>
 			<div className="transition-all">
 				<HorizontalSeparator className="my-4" />
-				<h2 className="text-xl font-semibold py-2 px-4">Activity for Today</h2>
-				<div className="flex justify-between overflow-hidden">
-					<div className="w-56 ">
-						<div className="shadow rounded-md w-full p-4 m-4 h-32 bg-light--theme-light dark:bg-[#26272C]">
+				<h2 className="px-4 py-2 text-xl font-semibold">Activity for Today</h2>
+				<div className="flex flex-col justify-between overflow-hidden gap-y-5">
+					<div className="flex items-center gap-3 wrap">
+						<div className="shadow basis-1/4 min-w-56 max-w-80 rounded-md w-full p-4 m-4 h-32 bg-light--theme-light dark:bg-[#26272C]">
 							<span>{t('timer.TIME_ACTIVITY')}</span>
-							<h2 className="text-3xl font-bold my-3">
+							<h2 className="my-3 text-3xl font-bold">
 								{activityPercent ? activityPercent.toFixed(2) : '00'} %
 							</h2>
 							<ProgressBar width={'80%'} progress={`${activityPercent}%`} className="my-2" />
 						</div>
 					</div>
-					<div className="p-4 flex-1 overflow-hidden">
+					<div className="flex-1 overflow-hidden">
 						<Tab.Group>
 							<Tab.List className="w-full flex space-x-1 rounded-xl bg-gray-200 dark:bg-[#FFFFFF14] p-2 mx-4">
 								{Object.values(ActivityFilters).map((filter: string) => (
@@ -63,16 +63,16 @@ const UserTeamActivity = ({ showActivity, member }: { showActivity: boolean; mem
 								))}
 							</Tab.List>
 							<Tab.Panels>
-								<Tab.Panel className="w-full mx-4 p-2 overflow-hidden">
+								<Tab.Panel className="w-full p-2 mx-4 overflow-hidden">
 									<UserWorkedTaskTab member={member} />
 								</Tab.Panel>
-								<Tab.Panel className="w-full mx-4 p-2">
+								<Tab.Panel className="w-full p-2 mx-4">
 									<ScreenshootTeamTab />
 								</Tab.Panel>
-								<Tab.Panel className="w-full mx-4 p-2">
+								<Tab.Panel className="w-full p-2 mx-4">
 									<AppsTab />
 								</Tab.Panel>
-								<Tab.Panel className="w-full mx-4 p-2">
+								<Tab.Panel className="w-full p-2 mx-4">
 									<VisitedSitesTab />
 								</Tab.Panel>
 							</Tab.Panels>