From f5e45af0266faa93506fee34de4e974dcfe35659 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Fri, 19 Jul 2024 10:14:40 +0200
Subject: [PATCH] fix: remove unecessary paddings / margings on home and team
 page (#2759)

* fix: remove unecessary paddings / margings on home and team page

* fix: fix broken views
---
 apps/web/app/[locale]/page-component.tsx      | 109 ++++++++----------
 .../app/[locale]/profile/[memberId]/page.tsx  |  13 +--
 apps/web/lib/layout/main-layout.tsx           |   4 +-
 3 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index e1b331bf5..dc4e771ad 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -7,9 +7,9 @@ import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Breadcrumb, Card, Divider } from 'lib/components';
+import { Breadcrumb, Card } from 'lib/components';
 import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
-import { Footer, MainLayout } from 'lib/layout';
+import { MainLayout } from 'lib/layout';
 import { IssuesView } from '@app/constants';
 import { useNetworkState } from '@uidotdev/usehooks';
 import Offline from '@components/pages/offline';
@@ -65,69 +65,56 @@ function MainPage() {
 	return (
 		<>
 			<div className="flex flex-col h-screen justify-between">
-				<div className="flex-grow">
-					<MainLayout className="h-auto" footerClassName={clsxm(' hidden')}>
-						<ChatwootWidget />
-						<div className="pt-3 h-[80vh]">
-							<ResizablePanelGroup direction="vertical">
-								{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
-								<ResizablePanel
-									defaultSize={50}
-									maxSize={48}
-									className={clsxm(
-										headerSize < 20 ? '!overflow-hidden' : '!overflow-visible',
-										'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
-									)}
-									onResize={(size) => setHeaderSize(size)}
-								>
-									<div className="bg-white sticky z-50 dark:bg-dark-high">
-										<div
-											className={clsxm(
-												'bg-white dark:bg-dark-high ',
-												!fullWidth && 'x-container'
-											)}
-										>
-											<div className="mx-8-container pt-9 !px-0 flex flex-row items-start justify-between ">
-												<div className="flex justify-center items-center gap-8 h-10">
-													<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-													<Breadcrumb paths={breadcrumb} className="text-sm" />
-												</div>
-												<div className="flex h-10 w-max items-center justify-center   gap-1">
-													<HeaderTabs linkAll={false} />
-												</div>
+				{/* <div className="flex-grow "> */}
+				<MainLayout className="h-full" footerClassName={clsxm('')}>
+					<ChatwootWidget />
+					<div className=" h-full">
+						<ResizablePanelGroup direction="vertical">
+							{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
+							<ResizablePanel
+								defaultSize={30}
+								maxSize={48}
+								className={clsxm(
+									headerSize < 20 ? '!overflow-hidden ' : '!overflow-visible',
+									'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
+								)}
+								onResize={(size) => setHeaderSize(size)}
+							>
+								<div className="bg-white sticky z-50 dark:bg-dark-high">
+									<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
+										<div className="mx-8-container pt-9 !px-0 flex flex-row items-start justify-between ">
+											<div className="flex justify-center items-center gap-8 h-10">
+												<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+												<Breadcrumb paths={breadcrumb} className="text-sm" />
 											</div>
-											<div className="mx-8-container mb-1">
-												<UnverifiedEmail />
-												<TeamInvitations />
-												<TeamOutstandingNotifications />
-												{isTeamMember ? (
-													<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
-												) : null}
+											<div className="flex h-10 w-max items-center justify-center  gap-1">
+												<HeaderTabs linkAll={false} />
 											</div>
-											<TeamMemberHeader view={view} />
 										</div>
+										<div className="mx-8-container mb-1">
+											<UnverifiedEmail />
+											<TeamInvitations />
+											<TeamOutstandingNotifications />
+											{isTeamMember ? (
+												<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
+											) : null}
+										</div>
+										<TeamMemberHeader view={view} />
 									</div>
-								</ResizablePanel>
-								<ResizableHandle withHandle />
-
-								{/* </Container> */}
-								<ResizablePanel
-									defaultSize={55}
-									maxSize={95}
-									className="!overflow-y-scroll custom-scrollbar"
-								>
-									<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
-								</ResizablePanel>
-							</ResizablePanelGroup>
-						</div>
-					</MainLayout>
-				</div>
-				<div className="bg-white dark:bg-transparent ">
-					<Divider />
-					<Footer
-						className={clsxm('justify-between w-full px-0  mx-auto', fullWidth ? 'px-8' : 'x-container')}
-					/>
-				</div>
+								</div>
+							</ResizablePanel>
+							<ResizableHandle withHandle />
+							{/* </Container> */}
+							<ResizablePanel
+								defaultSize={65}
+								maxSize={95}
+								className="!overflow-y-scroll custom-scrollbar"
+							>
+								<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
+							</ResizablePanel>
+						</ResizablePanelGroup>
+					</div>
+				</MainLayout>
 			</div>
 			<Analytics />
 		</>
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
index c44a3d619..e0afccf3c 100644
--- a/apps/web/app/[locale]/profile/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -13,7 +13,7 @@ import { TaskFilter, Timer, TimerStatus, UserProfileTask, getTimerStatusValue, u
 import { MainHeader, MainLayout } from 'lib/layout';
 import Link from 'next/link';
 import React, { useCallback, useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl'
+import { useTranslations } from 'next-intl';
 import stc from 'string-to-color';
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -105,15 +105,12 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 				<MainLayout showTimer={profileIsAuthUser && isTrackingEnabled}>
 					<ResizablePanelGroup direction="vertical">
 						<ResizablePanel
-							defaultSize={47}
-							maxSize={50}
+							defaultSize={30}
+							maxSize={48}
 							className={clsxm(headerSize < 20 ? '!overflow-hidden' : '!overflow-visible')}
 							onResize={(size) => setHeaderSize(size)}
 						>
-							<MainHeader
-								fullWidth={fullWidth}
-								className={clsxm(hookFilterType && ['pb-0'], 'pb-2', 'pt-20 sticky top-20 z-50')}
-							>
+							<MainHeader fullWidth={fullWidth} className={clsxm(hookFilterType && ['pb-0'], 'pb-2')}>
 								{/* Breadcrumb */}
 								<div className="flex items-center gap-8">
 									<Link href="/">
@@ -141,7 +138,7 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 							</MainHeader>
 						</ResizablePanel>
 						<ResizableHandle withHandle />
-						<ResizablePanel defaultSize={53} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
+						<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
 							{hook.tab == 'worked' && canSeeActivity && (
 								<Container fullWidth={fullWidth} className="py-8">
 									<div className={clsxm('flex justify-start items-center gap-4 mt-3')}>
diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
index 6f5ec8c2f..26aba60d5 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 h-full">
 			<style jsx global>
 				{`
 					:root {
@@ -70,7 +70,7 @@ export function MainLayout({
 				<div className={clsxm('lg:flex-1 lg:w-full ', childrenClassName)}>{children}</div>
 				<Container
 					fullWidth={fullWidth}
-					className={clsxm('w-full  px-8', fullWidth && '!mx-0', footerClassName)}
+					className={clsxm('w-full px-8', fullWidth && '!mx-0', footerClassName)}
 				>
 					<Divider />
 					<Footer className="justify-between w-full px-0  mx-auto" />