From c685f1ade0c2ad20276c179abe81e99ef5a80b95 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 16:44:08 +0200
Subject: [PATCH 01/13] fest: add FullWidth Switch

---
 apps/web/lib/components/container.tsx   | 15 ++++++++++-
 apps/web/lib/components/toggler.tsx     | 36 ++++++++++++++++++++++++-
 apps/web/lib/features/user-nav-menu.tsx | 12 ++++++++-
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/apps/web/lib/components/container.tsx b/apps/web/lib/components/container.tsx
index 40c8c34fa..a77e1b260 100644
--- a/apps/web/lib/components/container.tsx
+++ b/apps/web/lib/components/container.tsx
@@ -1,7 +1,20 @@
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
+import { Transition } from '@headlessui/react';
 import { PropsWithChildren } from 'react';
 
 export function Container({ children, className, fullWidth }: PropsWithChildren<IClassName>) {
-	return <div className={clsxm(!fullWidth && 'x-container', fullWidth && 'mx-8', className)}>{children}</div>;
+	return (
+		<Transition
+			show={true}
+			enter="transition-opacity duration-75"
+			enterFrom="opacity-0"
+			enterTo="opacity-100"
+			leave="transition-opacity duration-150"
+			leaveFrom="opacity-100"
+			leaveTo="opacity-0"
+		>
+			<div className={clsxm(!fullWidth && 'x-container', fullWidth && 'mx-8', className)}>{children}</div>;
+		</Transition>
+	);
 }
diff --git a/apps/web/lib/components/toggler.tsx b/apps/web/lib/components/toggler.tsx
index f5665af62..47d7ef249 100644
--- a/apps/web/lib/components/toggler.tsx
+++ b/apps/web/lib/components/toggler.tsx
@@ -12,11 +12,12 @@ import {
 	TimerStopIcon
 } from 'assets/svg';
 import { Text } from './typography';
-import { Cross2Icon, LightningBoltIcon, UpdateIcon } from '@radix-ui/react-icons';
+import { AllSidesIcon, Cross2Icon, LightningBoltIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { useRecoilState } from 'recoil';
 import { dataSyncModeState, isDataSyncState } from '@app/stores/data-sync';
 import { useModal } from '@app/hooks';
 import { RealTimePopup } from 'lib/settings/sync.zone';
+import { fullWidthState } from '@app/stores/fullWidth';
 
 type Props = {
 	className?: string;
@@ -207,3 +208,36 @@ export function CommonToggle({
 		</div>
 	);
 }
+
+export function FullWidthToggler({ className }: IClassName) {
+	const [fullWidth, setFullWidth] = useRecoilState(fullWidthState);
+
+	return (
+		<div
+			className={clsxm(
+				'flex flex-row items-start bg-light--theme-dark dark:bg-[#1D222A] py-1 px-2 rounded-[60px] gap-[10px]',
+				className
+			)}
+		>
+			<button
+				onClick={() => setFullWidth(true)}
+				className={clsxm(
+					'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] ml-[-2px]',
+					fullWidth && 'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
+				)}
+			>
+				<AllSidesIcon className="dark:text-white" />
+			</button>
+
+			<button
+				onClick={() => setFullWidth(false)}
+				className={clsxm(
+					'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] mr-[-2px]',
+					!fullWidth && 'bg-red-400 shadow-md dark:bg-transparent dark:bg-red-400'
+				)}
+			>
+				<Cross2Icon className={clsxm(!fullWidth && 'text-white')} />
+			</button>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index a81c69259..9cb7810d8 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -7,7 +7,7 @@ import { publicState } from '@app/stores';
 import { clsxm, isValidUrl } from '@app/utils';
 import { Popover, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import { Avatar, Card, Divider, Text, ThemeToggler, Tooltip } from 'lib/components';
+import { Avatar, Card, Divider, FullWidthToggler, Text, ThemeToggler, Tooltip } from 'lib/components';
 
 import { DevicesIcon, LogoutRoundIcon, MoonLightOutlineIcon as MoonIcon, PeoplesIcon } from 'assets/svg';
 import { BriefCaseIcon, SettingOutlineIcon } from 'assets/svg';
@@ -25,6 +25,7 @@ import { TeamsDropDown } from './team/teams-dropdown';
 import { KeyboardShortcuts } from 'lib/components/keyboard-shortcuts';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { AllSidesIcon } from '@radix-ui/react-icons';
 
 export function UserNavAvatar() {
 	const { user } = useAuthenticateUser();
@@ -126,6 +127,7 @@ function UserNavMenu() {
 	const { timerStatus } = useTimer();
 	const { activeTeam, isTeamMember } = useOrganizationTeams();
 	const publicTeam = useRecoilValue(publicState);
+
 	const members = activeTeam?.members || [];
 	const currentMember = members.find((m) => {
 		return m.employee.userId === user?.id;
@@ -239,6 +241,14 @@ function UserNavMenu() {
 						</Link>
 					</li>
 
+					{/* Fullwidth menu */}
+					<li className="flex items-center justify-between space-x-3 font-normal">
+						<div className="flex items-center flex-1 space-x-3">
+							<AllSidesIcon className="w-5 h-5" /> <span>{'Full width'}</span>
+						</div>
+						<FullWidthToggler className="scale-75" />
+					</li>
+
 					{/* Darkmode menu */}
 					<li className="flex items-center justify-between mb-3 space-x-3 font-normal">
 						<div className="flex items-center flex-1 space-x-3">

From 5842943e83b40179e403da40deeb27f7e3a298df Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 17:27:22 +0200
Subject: [PATCH 02/13] fix: Footer margins

---
 apps/web/app/[locale]/settings/layout.tsx | 20 +++++++++-----------
 apps/web/lib/components/container.tsx     |  3 ++-
 apps/web/lib/layout/main-layout.tsx       |  9 ++++++---
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/apps/web/app/[locale]/settings/layout.tsx b/apps/web/app/[locale]/settings/layout.tsx
index b38a32b6a..07717099b 100644
--- a/apps/web/app/[locale]/settings/layout.tsx
+++ b/apps/web/app/[locale]/settings/layout.tsx
@@ -28,25 +28,23 @@ const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 				className="items-start pb-1 overflow-hidden w-full"
 				childrenClassName="h-[calc(100vh-_300px)] overflow-hidden w-full"
 			>
-				<div>
+				<Container fullWidth={fullWidth}>
 					<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
-						<Container fullWidth={fullWidth}>
-							<div className="flex flex-row items-center justify-start gap-8">
-								<Link href="/">
-									<ArrowLeftIcon className="w-6 h-6" />
-								</Link>
+						<div className="flex flex-row items-center justify-start gap-8">
+							<Link href="/">
+								<ArrowLeftIcon className="w-6 h-6" />
+							</Link>
 
-								<Breadcrumb paths={breadcrumb} className="text-sm" />
-							</div>
-						</Container>
+							<Breadcrumb paths={breadcrumb} className="text-sm" />
+						</div>
 					</div>
 					<div className="flex">
-						<div className="w-96 ml-8">
+						<div className="h-[calc(100vh-_186px)] mt-3 p-10">
 							<LeftSideSettingMenu />
 						</div>
 						<div className="h-[calc(100vh-_186px)] mt-3 p-10 overflow-y-auto  w-full">{children}</div>
 					</div>
-				</div>
+				</Container>
 			</MainLayout>
 		);
 	}
diff --git a/apps/web/lib/components/container.tsx b/apps/web/lib/components/container.tsx
index a77e1b260..c9fc3cde7 100644
--- a/apps/web/lib/components/container.tsx
+++ b/apps/web/lib/components/container.tsx
@@ -13,8 +13,9 @@ export function Container({ children, className, fullWidth }: PropsWithChildren<
 			leave="transition-opacity duration-150"
 			leaveFrom="opacity-100"
 			leaveTo="opacity-0"
+			className="w-full p-0 m-0"
 		>
-			<div className={clsxm(!fullWidth && 'x-container', fullWidth && 'mx-8', className)}>{children}</div>;
+			<div className={clsxm(!fullWidth && 'x-container', fullWidth && 'mx-8', className)}>{children}</div>
 		</Transition>
 	);
 }
diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
index 1a2239170..4aa4e1fb8 100644
--- a/apps/web/lib/layout/main-layout.tsx
+++ b/apps/web/lib/layout/main-layout.tsx
@@ -30,7 +30,7 @@ export function MainLayout({
 }: Props) {
 	const fullWidth = useRecoilValue(fullWidthState);
 	return (
-		<div className='w-full'>
+		<div className="w-full">
 			<style jsx global>
 				{`
 					:root {
@@ -55,9 +55,12 @@ export function MainLayout({
 			>
 				<div className={clsxm('lg:flex-1 lg:w-full', childrenClassName)}>{children}</div>
 
-				<Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8', footerClassName)}>
+				<Container
+					fullWidth={fullWidth}
+					className={clsxm('w-full px-8', fullWidth && '!mx-0', footerClassName)}
+				>
 					<Divider />
-					<Footer className="justify-between px-0 w-full" />
+					<Footer className="justify-between px-0 w-full mx-auto" />
 				</Container>
 			</div>
 			<Toaster />

From ca1990f1cd6d91841a3864283592da2215adc30a Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 18:17:09 +0200
Subject: [PATCH 03/13] fix: CardView Header with FullWidth mode

---
 apps/web/lib/features/team/user-team-card/index.tsx  |  4 ++--
 .../features/team/user-team-card/task-skeleton.tsx   | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
index f2eb407c2..ec0827ebe 100644
--- a/apps/web/lib/features/team/user-team-card/index.tsx
+++ b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -132,7 +132,7 @@ export function UserTeamCard({
 					<VerticalSeparator />
 
 					{/* Task information */}
-					<div className="flex justify-between items-center flex-1 max-w-[40%]">
+					<div className="flex justify-between items-center flex-1 min-w-[40%]">
 						<TaskInfo
 							edition={taskEdition}
 							memberInfo={memberInfo}
@@ -172,7 +172,7 @@ export function UserTeamCard({
 					<VerticalSeparator />
 
 					{/* TodayWorkedTime */}
-					<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 3xl:w-64">
+					<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem]">
 						<TodayWorkedTime isAuthUser={memberInfo.isAuthUser} className="" memberInfo={memberInfo} />
 						<p
 							onClick={() => showActivityFilter('DATE', memberInfo.member ?? null)}
diff --git a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
index 343f6e391..e07dd284a 100644
--- a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
+++ b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
@@ -45,15 +45,15 @@ export function UserTeamCardHeader() {
 	return (
 		<div className="my-6 dark:text-[#7B8089] font-normal">
 			<div className="relative m-0 flex items-center">
-				<div className="flex w-1/4 justify-center items-center space-x-2 lg:space-x-4 2xl:w-[20.625rem]">
+				<div className="flex 2xl:w-[20.625rem] w-1/4 justify-center items-center space-x-2 lg:space-x-4">
 					<p>{t('common.NAME')}</p>
 				</div>
 
-				<div className="flex-grow self-stretch flex justify-end items-center">{t('common.TASK')}</div>
+				<div className="flex-grow self-stretch flex flex-1 justify-center items-center">{t('common.TASK')}</div>
 
-				<div className="flex flex-1 w-[100%-_20px]"></div>
+				{/* <div className="flex w-[100%-_20px]"></div> */}
 
-				<div className="3xl:w-[12rem] flex w-1/5 flex-col justify-center gap-y-[1.125rem] 2xl:w-48">
+				<div className="w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] flex flex-col justify-center gap-y-[1.125rem]">
 					<div className="lg:text-center text-left w-full mt-1.5">
 						<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
 							<div className="text-center">
@@ -64,8 +64,8 @@ export function UserTeamCardHeader() {
 						</Tooltip>
 					</div>
 				</div>
-				<div className="3xl:w-80 w-1/5 lg:px-4 2xl:w-52 lg:text-center text-right">{t('common.ESTIMATE')}</div>
-				<div className="3xl:w-64 flex w-1/5 cursor-pointer items-center justify-center mt-1.5 gap-4 lg:px-3 2xl:w-52">
+				<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 lg:text-center text-right">{t('common.ESTIMATE')}</div>
+				<div className="w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] flex cursor-pointer items-center justify-center mt-1.5 ">
 					<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
 						{t('task.taskTableHead.TOTAL_WORK.TITLE')}
 						<br />

From 8194a59f45920cda5978566bea4aa5165f2c4f6f Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 18:31:18 +0200
Subject: [PATCH 04/13] feat: add transition when Switch FullWidth mode

---
 apps/web/lib/components/container.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/lib/components/container.tsx b/apps/web/lib/components/container.tsx
index c9fc3cde7..b1b09c4f2 100644
--- a/apps/web/lib/components/container.tsx
+++ b/apps/web/lib/components/container.tsx
@@ -15,7 +15,9 @@ export function Container({ children, className, fullWidth }: PropsWithChildren<
 			leaveTo="opacity-0"
 			className="w-full p-0 m-0"
 		>
-			<div className={clsxm(!fullWidth && 'x-container', fullWidth && 'mx-8', className)}>{children}</div>
+			<div className={clsxm('transition-all', !fullWidth && 'x-container', fullWidth && 'mx-8', className)}>
+				{children}
+			</div>
 		</Transition>
 	);
 }

From 7212134d4a33111ce8983f943b42a260ff2e40f9 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 18:37:30 +0200
Subject: [PATCH 05/13] fix: webpack fonts errors

---
 apps/web/next.config.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 227ec92c7..e6045275b 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -86,6 +86,14 @@ const nextConfig = {
 			'gauzystage.s3.wasabisys.com'
 		]
 	},
+	async rewrites() {
+		return [
+			{
+				source: '/fonts/:path*',
+				destination: '/assets/fonts/:path*'
+			}
+		];
+	},
 	...sentryConfig
 };
 

From 588156c8d9579da26d2f086e89f1c5be73dbc543 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 18:44:41 +0200
Subject: [PATCH 06/13] fix: import & export fonts with next.config

---
 apps/web/styles/globals.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 9b7d11bf4..8caed0001 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -217,27 +217,27 @@ html.dark {
 
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-VariableFont_wght';
-	src: url('../public/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf');
+	src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Regular';
-	src: url('../public/assets/fonts/PlusJakartaSans-Regular.ttf');
+	src: url('/fonts/PlusJakartaSans-Regular.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Bold';
-	src: url('../public/assets/fonts/PlusJakartaSans-Bold.ttf');
+	src: url('/fonts/PlusJakartaSans-Bold.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Light';
-	src: url('../public/assets/fonts/PlusJakartaSans-Light.ttf');
+	src: url('/fonts/PlusJakartaSans-Light.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Medium';
-	src: url('../public/assets/fonts/PlusJakartaSans-Medium.ttf');
+	src: url('/fonts/PlusJakartaSans-Medium.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-SemiBold';
-	src: url('../public/assets/fonts/PlusJakartaSans-SemiBold.ttf');
+	src: url('/fonts/PlusJakartaSans-SemiBold.ttf');
 }
 
 .search-class {

From 36e23a2913bbc4ddd2f27f628d5cdfc6215737bb Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 18:59:41 +0200
Subject: [PATCH 07/13] fix: Setting SideBar

---
 apps/web/app/[locale]/settings/layout.tsx     | 26 ++++++++++++-------
 .../lib/settings/left-side-setting-menu.tsx   |  4 ++-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/web/app/[locale]/settings/layout.tsx b/apps/web/app/[locale]/settings/layout.tsx
index 07717099b..0e13abf00 100644
--- a/apps/web/app/[locale]/settings/layout.tsx
+++ b/apps/web/app/[locale]/settings/layout.tsx
@@ -10,6 +10,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { clsxm } from '@app/utils';
 
 const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 	const t = useTranslations();
@@ -28,18 +29,23 @@ const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 				className="items-start pb-1 overflow-hidden w-full"
 				childrenClassName="h-[calc(100vh-_300px)] overflow-hidden w-full"
 			>
-				<Container fullWidth={fullWidth}>
-					<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
-						<div className="flex flex-row items-center justify-start gap-8">
-							<Link href="/">
-								<ArrowLeftIcon className="w-6 h-6" />
-							</Link>
+				<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
+					<Container
+						fullWidth={fullWidth}
+						className={clsxm('w-full flex flex-row items-center justify-start gap-8')}
+					>
+						{/* <div className=""> */}
+						<Link href="/">
+							<ArrowLeftIcon className="w-6 h-6" />
+						</Link>
 
-							<Breadcrumb paths={breadcrumb} className="text-sm" />
-						</div>
-					</div>
+						<Breadcrumb paths={breadcrumb} className="text-sm" />
+						{/* </div> */}
+					</Container>
+				</div>
+				<Container fullWidth={fullWidth} className={clsxm('!p-0')}>
 					<div className="flex">
-						<div className="h-[calc(100vh-_186px)] mt-3 p-10">
+						<div className="h-[calc(100vh-_186px)]">
 							<LeftSideSettingMenu />
 						</div>
 						<div className="h-[calc(100vh-_186px)] mt-3 p-10 overflow-y-auto  w-full">{children}</div>
diff --git a/apps/web/lib/settings/left-side-setting-menu.tsx b/apps/web/lib/settings/left-side-setting-menu.tsx
index a4e6c1c07..55d9e164c 100644
--- a/apps/web/lib/settings/left-side-setting-menu.tsx
+++ b/apps/web/lib/settings/left-side-setting-menu.tsx
@@ -66,7 +66,9 @@ export const LeftSideSettingMenu = ({ className }: { className?: string }) => {
 
 	return (
 		<div className={clsxm(' ', className)}>
-			<Text className="text-4xl font-normal my-10 text-center sm:text-left">{t('common.SETTINGS')}</Text>
+			<Text className="text-4xl font-normal my-10 min-w-[16rem] text-center sm:text-left">
+				{t('common.SETTINGS')}
+			</Text>
 			<div className="flex sm:block h-[calc(100vh-_382px)] overflow-y-auto">
 				<SidebarAccordian
 					title={

From eed84b103e86966d29c3f88fd95a73d81f136a7c Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 19:46:35 +0200
Subject: [PATCH 08/13] feat: save user Preferences of fullWidth mode

---
 apps/web/app/[locale]/page-component.tsx | 10 ++++++++--
 apps/web/lib/components/toggler.tsx      |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index fca662406..6f08e9f4e 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -30,7 +30,7 @@ import ChatwootWidget from 'lib/features/integrations/chatwoot';
 import 'react-loading-skeleton/dist/skeleton.css';
 import '../../styles/globals.css';
 
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { ChevronDown } from 'lucide-react';
 import HeaderTabs from '@components/pages/main/header-tabs';
@@ -41,7 +41,7 @@ import { PeoplesIcon } from 'assets/svg';
 function MainPage() {
 	const t = useTranslations();
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
-	const fullWidth = useRecoilValue(fullWidthState);
+	const [fullWidth, setFullWidth] = useRecoilState(fullWidthState);
 	const [view, setView] = useRecoilState(headerTabs);
 	const path = usePathname();
 	const breadcrumb = [
@@ -56,6 +56,12 @@ function MainPage() {
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [path, setView]);
+
+	React.useEffect(() => {
+		window && window?.localStorage.getItem('conf-fullwidth-mode');
+		setFullWidth(JSON.parse(window?.localStorage.getItem('conf-fullwidth-mode') || 'true'));
+	}, [fullWidth, setFullWidth]);
+
 	if (!online) {
 		return <Offline />;
 	}
diff --git a/apps/web/lib/components/toggler.tsx b/apps/web/lib/components/toggler.tsx
index 47d7ef249..0dcaae260 100644
--- a/apps/web/lib/components/toggler.tsx
+++ b/apps/web/lib/components/toggler.tsx
@@ -212,6 +212,10 @@ export function CommonToggle({
 export function FullWidthToggler({ className }: IClassName) {
 	const [fullWidth, setFullWidth] = useRecoilState(fullWidthState);
 
+	React.useEffect(() => {
+		window && window.localStorage.setItem('conf-fullwidth-mode', JSON.stringify(fullWidth));
+	}, [fullWidth]);
+
 	return (
 		<div
 			className={clsxm(

From d81c8fbde564d40fe1d4fd70890394a8a624e946 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 19:50:35 +0200
Subject: [PATCH 09/13] fix: Cspell errors

---
 apps/web/app/[locale]/page-component.tsx | 4 ++--
 apps/web/lib/components/toggler.tsx      | 2 +-
 apps/web/lib/features/user-nav-menu.tsx  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index 6f08e9f4e..2a2e1a857 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -58,8 +58,8 @@ function MainPage() {
 	}, [path, setView]);
 
 	React.useEffect(() => {
-		window && window?.localStorage.getItem('conf-fullwidth-mode');
-		setFullWidth(JSON.parse(window?.localStorage.getItem('conf-fullwidth-mode') || 'true'));
+		window && window?.localStorage.getItem('conf-fullWidth-mode');
+		setFullWidth(JSON.parse(window?.localStorage.getItem('conf-fullWidth-mode') || 'true'));
 	}, [fullWidth, setFullWidth]);
 
 	if (!online) {
diff --git a/apps/web/lib/components/toggler.tsx b/apps/web/lib/components/toggler.tsx
index 0dcaae260..6fe058b74 100644
--- a/apps/web/lib/components/toggler.tsx
+++ b/apps/web/lib/components/toggler.tsx
@@ -213,7 +213,7 @@ export function FullWidthToggler({ className }: IClassName) {
 	const [fullWidth, setFullWidth] = useRecoilState(fullWidthState);
 
 	React.useEffect(() => {
-		window && window.localStorage.setItem('conf-fullwidth-mode', JSON.stringify(fullWidth));
+		window && window.localStorage.setItem('conf-fullWidth-mode', JSON.stringify(fullWidth));
 	}, [fullWidth]);
 
 	return (
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 9cb7810d8..0770d89a9 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -241,7 +241,7 @@ function UserNavMenu() {
 						</Link>
 					</li>
 
-					{/* Fullwidth menu */}
+					{/* FullWidth menu */}
 					<li className="flex items-center justify-between space-x-3 font-normal">
 						<div className="flex items-center flex-1 space-x-3">
 							<AllSidesIcon className="w-5 h-5" /> <span>{'Full width'}</span>

From 9391edcffc81432e6c283041f3eebc1cbcbed65b Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 5 Mar 2024 19:50:59 +0200
Subject: [PATCH 10/13] fix: Cspell errors

---
 apps/web/lib/features/user-nav-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 0770d89a9..178d41018 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -241,7 +241,7 @@ function UserNavMenu() {
 						</Link>
 					</li>
 
-					{/* FullWidth menu */}
+					{/* fullWidth menu */}
 					<li className="flex items-center justify-between space-x-3 font-normal">
 						<div className="flex items-center flex-1 space-x-3">
 							<AllSidesIcon className="w-5 h-5" /> <span>{'Full width'}</span>

From c63deba841cb2a6f4925bb2a55ac1f0ff75a00b3 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Wed, 6 Mar 2024 06:52:29 +0200
Subject: [PATCH 11/13] fix: card margins of Team Members

---
 apps/web/lib/features/team/user-team-card/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
index ec0827ebe..d736791b9 100644
--- a/apps/web/lib/features/team/user-team-card/index.tsx
+++ b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -5,7 +5,7 @@ import { useCollaborative, useTMCardTaskEdit, useTaskStatistics, useTeamMemberCa
 import { IClassName, IOrganizationTeamList, OT_Member } from '@app/interfaces';
 import { timerSecondsState } from '@app/stores';
 import { clsxm } from '@app/utils';
-import { Card, HorizontalSeparator, InputField, Text, VerticalSeparator } from 'lib/components';
+import { Card, InputField, Text, VerticalSeparator } from 'lib/components';
 import { TaskTimes, TodayWorkedTime } from 'lib/features';
 import { useTranslations } from 'next-intl';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -114,7 +114,7 @@ export function UserTeamCard({
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'sm:block hidden dark:bg-[#1E2025] min-h-[7rem]',
+					'sm:block hidden dark:bg-[#1E2025] min-h-[7rem] !py-4',
 					active
 						? ['border-primary-light border-[0.1875rem]']
 						: ['dark:border border border-transparent dark:border-[#FFFFFF14]'],
@@ -224,9 +224,9 @@ export function UserTeamCard({
 				{/* Card menu */}
 				<div className="absolute right-2">{menu}</div>
 			</Card>
-			{currentExit && (
+			{/* {currentExit && (
 				<HorizontalSeparator className="mt-2 !border-primary-light dark:!border-primary-light !border-t-2" />
-			)}
+			)} */}
 		</div>
 	);
 }

From 55f0285e7f469b3bb2f010676648207517047f31 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Wed, 6 Mar 2024 07:05:13 +0200
Subject: [PATCH 12/13] fix: Profile Task Card

---
 apps/web/lib/features/task/task-card.tsx     | 2 +-
 apps/web/lib/features/user-profile-tasks.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 1d0021a97..296f9abaf 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -118,7 +118,7 @@ export function TaskCard(props: Props) {
 					<SixSquareGridIcon className="w-6 h-6 text-[#CCCCCC] dark:text-[#4F5662]" />
 				</div>
 
-				<div className="flex-1 max-w-[40%] flex flex-row justify-between">
+				<div className="flex-1 min-w-[40%] max-w-[40%] flex flex-row justify-between">
 					{/* Task information */}
 					<TaskInfo
 						task={task}
diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx
index 38fcbfe6d..538254942 100644
--- a/apps/web/lib/features/user-profile-tasks.tsx
+++ b/apps/web/lib/features/user-profile-tasks.tsx
@@ -85,7 +85,7 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 				</div>
 			)}
 
-			<ul className="flex flex-col gap-6">
+			<ul className="flex flex-col gap-4">
 				{dataToDisplay.map((task, index) => {
 					return (
 						<li key={task.id}>

From 7e7398096283ada751d123da7b4f95d61920a361 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Wed, 6 Mar 2024 07:10:59 +0200
Subject: [PATCH 13/13] fix: Profile Task Card

---
 apps/web/lib/features/task/task-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 296f9abaf..73087c029 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -118,7 +118,7 @@ export function TaskCard(props: Props) {
 					<SixSquareGridIcon className="w-6 h-6 text-[#CCCCCC] dark:text-[#4F5662]" />
 				</div>
 
-				<div className="flex-1 min-w-[40%] max-w-[40%] flex flex-row justify-between">
+				<div className="flex-1 min-w-[35%] max-w-[40%] flex flex-row justify-between">
 					{/* Task information */}
 					<TaskInfo
 						task={task}