From afb696780dd31689bd4ded128335362ae5bbe520 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Fri, 10 Jan 2025 13:29:17 +0200
Subject: [PATCH] [Bugfix] Adjusted Team Member Card layout to use available
 space effectively (#3467)

---
 apps/web/app/[locale]/all-teams/component.tsx | 22 ++++++++++---------
 .../features/all-teams-members-block-view.tsx |  2 +-
 apps/web/lib/settings/working-hours.tsx       |  6 ++---
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/web/app/[locale]/all-teams/component.tsx b/apps/web/app/[locale]/all-teams/component.tsx
index a62530752..4e0d8a149 100644
--- a/apps/web/app/[locale]/all-teams/component.tsx
+++ b/apps/web/app/[locale]/all-teams/component.tsx
@@ -39,19 +39,21 @@ function AllTeamsPage() {
 			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 />
+				<Container fullWidth={fullWidth} className="mx-auto">
+					<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>
-							<MemberFilter />
 						</div>
-					</div>
 
-					{view == IssuesView.CARDS && <TeamMemberHeader view={IssuesView.CARDS} />}
-				</div>
+						{view == IssuesView.CARDS && <TeamMemberHeader view={IssuesView.CARDS} />}
+					</div>
+				</Container>
 			}
 		>
 			<Container fullWidth={fullWidth} className="mx-auto mt-5">
diff --git a/apps/web/lib/features/all-teams-members-block-view.tsx b/apps/web/lib/features/all-teams-members-block-view.tsx
index 5cf5a63f1..10ee6b91b 100644
--- a/apps/web/lib/features/all-teams-members-block-view.tsx
+++ b/apps/web/lib/features/all-teams-members-block-view.tsx
@@ -29,7 +29,7 @@ export default function AllTeamsMembersBlockView({ teams }: { teams: IOrganizati
 	return (
 		<>
 			{employeesArray.length > 0 ? (
-				<div className="flex w-full flex-wrap items-start">{
+				<div className="flex w-full flex-wrap items-start justify-center">{
 					employeesArray.map((employee) =>
 						<div className="px-2" key={employee.id}>
 							<UserTeamBlockCard key={employee.id} member={employee} />
diff --git a/apps/web/lib/settings/working-hours.tsx b/apps/web/lib/settings/working-hours.tsx
index 9574ac264..44cf20703 100644
--- a/apps/web/lib/settings/working-hours.tsx
+++ b/apps/web/lib/settings/working-hours.tsx
@@ -59,7 +59,7 @@ export const WorkingHours: React.FC<WorkScheduleProps> = ({ initialSchedule }) =
         if (!user?.timeZone) {
             handleChangeTimezone(undefined);
         }
-    }, [currentTimezone, setValue, handleChangeTimezone]);
+    }, [currentTimezone, setValue, handleChangeTimezone, user?.timeZone]);
 
     React.useEffect(() => {
         setValue(
@@ -99,7 +99,7 @@ export const WorkingHours: React.FC<WorkScheduleProps> = ({ initialSchedule }) =
                     />
                 </div>
                 {schedule.map((workDay, index) => (
-                    <div key={workDay.day} className="flex items-center space-x-4 gap-4">
+                    <div key={workDay.day} className="flex gap-4 items-center space-x-4">
                         <div className="w-32">
                             <label className="inline-flex items-center">
                                 <ToggleSwitch
@@ -150,7 +150,7 @@ interface ToggleSwitchProps {
 export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ enabled, onToggle, renderTrackingIcon }) => {
     return (
         <div
-            className={`w-14 h-6 flex items-center rounded-full p-1 cursor-pointer transition-colors`}
+            className={`flex items-center p-1 w-14 h-6 rounded-full transition-colors cursor-pointer`}
             onClick={onToggle}
             style={
                 enabled