update:change kanban board layout

ever-co · Jan 3, 2024 · 9a49a16 · 9a49a16
1 parent 6492abd
commit 9a49a16
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -42,10 +42,9 @@ const Kanban = () => {
 			<MainLayout
 				showTimer={true}
 			>
-				<div className={'relative bg-white dark:bg-dark--theme pt-20 -mt-8 px-[32px] mx-[0px] w-full'}>
-					<Breadcrumb paths={breadcrumbPath} className="text-sm" />
-					<div className="flex flex-row items-center justify-between mt-[24px]">
-						<div></div>
+				<div className={'fixed flex flex-col justify-between bg-white dark:bg-dark--theme h-[20vh] z-10 px-[32px] mx-[0px] w-full'}>
+					<div className="flex flex-row items-center justify-between mt-[34px]">
+						<Breadcrumb paths={breadcrumbPath} className="text-sm" />
 						<div className="flex flex-row items-center gap-[12px]">
 							<p>08:00 ( UTC +04:30 )</p>
 							<VerticalLine />
@@ -87,7 +86,7 @@ const Kanban = () => {
 							</button>
 						</div>
 					</div>
-					<div className="relative flex flex-row justify-between items-center mt-[36px]">
+					<div className="relative flex flex-row justify-between items-center ">
 						<div className="flex flex-row">
 							<div
 								onClick={() => {
@@ -141,6 +140,7 @@ const Kanban = () => {
 						<div></div>
 					</div>
 				</div>
+				<div className="mt-[20vh] overflow-y-auto max-h-[60vh] z-0">
 				{/** TODO:fetch teamtask based on days */}
 				{/** Kanbanboard for today tasks */}
 				{activeTab === KanbanTabs.TODAY && (
@@ -174,6 +174,7 @@ const Kanban = () => {
 						)}
 					</>
 				)}
+				</div>
 			</MainLayout>
 		</>
 	);

diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -71,7 +71,7 @@ function InnerItemList({
 					minHeight: items.length < 0 && dropSnapshot.isDraggingOver ? '120px' : '20px',
 					marginTop: items.length > 0 ? '20px' : '0px'
 				}}
-				className="flex flex-col gap-2.5 max-h-[520px] overflow-y-auto overflow-x-hidden"
+				className="flex flex-col gap-2.5  overflow-x-hidden"
 			>
 				{items.map((item: ITeamTask, index: number) => (
 					<Draggable key={item.id} draggableId={item.id} index={index}>