From f836abd8f47a8a4933959cf1e702e988dcf61054 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 20 Jun 2026 09:21:13 +0330
Subject: [PATCH] responsive task manager

---
 .../taskmanager/components/AddNewColumn.tsx   |  2 +-
 src/pages/taskmanager/components/Column.tsx   | 52 +++++++++----------
 .../components/HeaderWorkspace.tsx            | 16 +++---
 src/pages/taskmanager/components/Task.tsx     | 12 ++---
 .../task-detail/TaskDetailActionBar.tsx       |  2 +-
 .../task-detail/TaskDetailMetadataPreview.tsx | 20 ++++---
 src/pages/taskmanager/workspace.tsx           | 32 ++++++------
 src/router/Main.tsx                           | 15 ++++--
 8 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/src/pages/taskmanager/components/AddNewColumn.tsx b/src/pages/taskmanager/components/AddNewColumn.tsx
index 312248f..e29ce44 100644
--- a/src/pages/taskmanager/components/AddNewColumn.tsx
+++ b/src/pages/taskmanager/components/AddNewColumn.tsx
@@ -3,7 +3,7 @@ import { type FC } from "react";
 
 const AddNewColumn: FC = () => {
   return (
-    <button type="button" className="bg-[#F0F3F7BF] bg-opacity-75 rounded-full px-6 py-4 flex items-center gap-2 shrink-0 self-start cursor-pointer">
+    <button type="button" className="bg-[#F0F3F7BF] bg-opacity-75 rounded-full px-4 sm:px-6 py-3 sm:py-4 flex items-center gap-2 shrink-0 self-start cursor-pointer w-[272px] sm:w-[288px] xl:w-[310px] justify-center">
       <AddCircle size={16} color="black" />
       <span className="text-xs text-black">اضافه کردن ستون جدید</span>
     </button>
diff --git a/src/pages/taskmanager/components/Column.tsx b/src/pages/taskmanager/components/Column.tsx
index 7823e34..043321f 100644
--- a/src/pages/taskmanager/components/Column.tsx
+++ b/src/pages/taskmanager/components/Column.tsx
@@ -46,7 +46,7 @@ const Column: FC<Props> = ({
 
   return (
     <div
-      className={`bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full flex flex-col self-start transition-colors ${
+      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col max-h-[calc(100dvh-140px)] sm:max-h-[calc(100dvh-152px)] xl:max-h-[calc(100dvh-220px)] transition-colors ${
         isDragOver ? "ring-2 ring-primary/40" : ""
       }`}
       onDragOver={handleDragOver}
@@ -54,35 +54,33 @@ const Column: FC<Props> = ({
       onDrop={(e) => handleDrop(e, tasks.length)}
     >
       <div className="flex justify-between items-center shrink-0">
-        <div className="font-bold text-sm">{column.title}</div>
-        <More size={20} color="black" />
+        <div className="font-bold text-sm truncate">{column.title}</div>
+        <More size={20} color="black" className="shrink-0" />
       </div>
 
-      {tasks.length > 0 && (
-        <div className="mt-5 flex flex-col gap-4">
-          {tasks.map((task, index) => (
-            <div
-              key={task.id}
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              onDrop={(e) => handleDrop(e, index)}
-            >
-              <Task
-                task={task}
-                isDragging={draggedTaskId === task.id}
-                onDragStart={onDragStart}
-                onDragEnd={onDragEnd}
-                onClick={onTaskClick}
-              />
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-0 overflow-y-auto overscroll-y-contain flex flex-col gap-3 sm:gap-4">
+        {tasks.map((task, index) => (
+          <div
+            key={task.id}
+            onDragOver={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            onDrop={(e) => handleDrop(e, index)}
+          >
+            <Task
+              task={task}
+              isDragging={draggedTaskId === task.id}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              onClick={onTaskClick}
+            />
+          </div>
+        ))}
+      </div>
 
       {isAdding ? (
-        <div className="mt-5 shrink-0 flex flex-col gap-3">
+        <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
           <input
             type="text"
             placeholder="عنوان تسک"
@@ -111,7 +109,7 @@ const Column: FC<Props> = ({
         <button
           type="button"
           onClick={() => setIsAdding(true)}
-          className="mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
+          className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
         >
           <AddCircle size={18} color="#888888" />
           <span className="text-description text-[13px] mt-0.5">اضافه کردن تسک</span>
diff --git a/src/pages/taskmanager/components/HeaderWorkspace.tsx b/src/pages/taskmanager/components/HeaderWorkspace.tsx
index 1a880ba..4c3537a 100644
--- a/src/pages/taskmanager/components/HeaderWorkspace.tsx
+++ b/src/pages/taskmanager/components/HeaderWorkspace.tsx
@@ -2,19 +2,19 @@ import { InfoCircle, Setting2, UserAdd } from "iconsax-react";
 
 const HeaderWorkspace = () => {
   return (
-    <div className="flex justify-between items-center bg-primary h-[102px] px-8">
-      <div className="flex gap-4 items-center">
-        <div className="text-white text-xl">طراحی Dpage</div>
-        <InfoCircle size={20} color="white" />
+    <div className="flex justify-between items-center bg-primary h-14 sm:h-16 xl:h-[102px] px-3 sm:px-6 xl:px-8 shrink-0 gap-3">
+      <div className="flex gap-2 sm:gap-4 items-center min-w-0">
+        <div className="text-white text-base sm:text-lg xl:text-xl truncate">طراحی Dpage</div>
+        <InfoCircle size={18} color="white" />
       </div>
 
-      <div className="flex gap-4 items-center">
-        <div className="flex gap-1 items-center px-2 rounded-lg bg-white h-8">
+      <div className="flex gap-2 sm:gap-4 items-center shrink-0">
+        <div className="flex gap-1 items-center px-2 sm:px-3 rounded-lg bg-white h-8">
           <UserAdd size={18} color="black" />
-          <div className="text-black text-xs">اشتراک گذاری</div>
+          <div className="text-black text-xs hidden sm:block">اشتراک گذاری</div>
         </div>
 
-        <Setting2 size={20} color="white" />
+        <Setting2 size={18} color="white" />
       </div>
     </div>
   );
diff --git a/src/pages/taskmanager/components/Task.tsx b/src/pages/taskmanager/components/Task.tsx
index 0e80d05..d4dc60e 100644
--- a/src/pages/taskmanager/components/Task.tsx
+++ b/src/pages/taskmanager/components/Task.tsx
@@ -41,17 +41,17 @@ const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd, onClick })
         {task.tag}
       </div>
       <div className="font-bold text-xs mt-2">{task.title}</div>
-      <div className="mt-2 flex items-center gap-4 text-xs">
-        <div className="flex items-center gap-1 text-[10px]">
-          <Calendar size={16} color="#292D32" />
-          <div>{task.dateRange}</div>
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
+        <div className="flex items-center gap-1 text-[10px] min-w-0">
+          <Calendar size={16} color="#292D32" className="shrink-0" />
+          <div className="truncate">{task.dateRange}</div>
         </div>
 
-        <div className="flex gap-1">
+        <div className="flex gap-1 shrink-0">
           <AttachCircle size={16} color="#292D32" />
           <div>{task.attachments}</div>
         </div>
-        <div className="flex gap-1">
+        <div className="flex gap-1 shrink-0">
           <TickSquare size={16} color="#292D32" />
           <div>
             {task.checklistDone}/{task.checklistTotal}
diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
index 16ec3f8..7859a8e 100644
--- a/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
+++ b/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
@@ -71,7 +71,7 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
                 className={`flex items-center gap-1.5 border rounded-lg px-3 py-2 text-[11px] cursor-pointer transition-colors ${isActive ? "bg-[#4A4A4A] text-white border-transparent" : "bg-white/50 text-[#292D32] border-white"}`}
               >
                 <Icon size={16} color={isActive ? "#FFFFFF" : "#292D32"} />
-                <span>{t(labelKey)}</span>
+                <span className="hidden sm:inline">{t(labelKey)}</span>
               </button>
             </div>
           );
diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
index fcaf69b..8be6a2e 100644
--- a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
+++ b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
@@ -19,8 +19,8 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
   const dateLabel = formatDateRange(startDate, endDate);
 
   return (
-    <div className="mt-7 flex gap-10">
-      <div>
+    <div className="mt-5 sm:mt-7 grid grid-cols-[auto_auto] gap-x-6 gap-y-4 sm:flex sm:flex-wrap sm:gap-x-10 sm:gap-y-4">
+      <div className="min-w-0">
         <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
         <div className="flex items-center gap-2 flex-wrap">
           {selectedLabels.map((label) => (
@@ -34,7 +34,7 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
           ))}
           <button
             type="button"
-            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
+            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer shrink-0"
             aria-label={t("taskmanager.task_detail.new_label")}
           >
             <Add
@@ -45,13 +45,13 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
         </div>
       </div>
 
-      <div>
+      <div className="min-w-0">
         <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
         <div className="flex items-center gap-2 flex-wrap">
           {selectedUsers.map((user) => (
             <div
               key={user.id}
-              className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden"
+              className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden shrink-0"
             >
               <img
                 src={user.avatar ?? AvatarImage}
@@ -62,7 +62,7 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
           ))}
           <button
             type="button"
-            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
+            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer shrink-0"
             aria-label={t("taskmanager.users")}
           >
             <Add
@@ -73,9 +73,13 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
         </div>
       </div>
 
-      <div>
+      <div className="col-span-2 sm:col-span-1 min-w-0">
         <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.date")}</div>
-        {dateLabel ? <span className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32]">{dateLabel}</span> : null}
+        {dateLabel ? (
+          <span className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32] whitespace-nowrap">
+            {dateLabel}
+          </span>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/pages/taskmanager/workspace.tsx b/src/pages/taskmanager/workspace.tsx
index 1738f4c..a6c01b5 100644
--- a/src/pages/taskmanager/workspace.tsx
+++ b/src/pages/taskmanager/workspace.tsx
@@ -41,23 +41,25 @@ const Workspace: FC = () => {
     : null;
 
   return (
-    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
+    <div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
-      <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-auto pb-6 items-start">
-        {columns.map((column) => (
-          <Column
-            key={column.id}
-            column={column}
-            tasks={tasksByColumn[column.id] ?? []}
-            draggedTaskId={draggedTaskId}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onDrop={handleDrop}
-            onTaskClick={setSelectedTask}
-          />
-        ))}
+      <div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
+        <div className="flex gap-3 sm:gap-4 xl:gap-7 px-3 sm:px-4 xl:px-8 pt-4 xl:pt-6 pb-4 xl:pb-6 h-full items-start w-max min-w-full">
+          {columns.map((column) => (
+            <Column
+              key={column.id}
+              column={column}
+              tasks={tasksByColumn[column.id] ?? []}
+              draggedTaskId={draggedTaskId}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDrop={handleDrop}
+              onTaskClick={setSelectedTask}
+            />
+          ))}
 
-        <AddNewColumn />
+          <AddNewColumn />
+        </div>
       </div>
 
       <TaskDetailModal
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 44c6813..1e7547e 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -106,12 +106,17 @@ const MainRouter: FC = () => {
   const isWorkspace = pathname.startsWith(Pages.taskmanager.workspace);
 
   return (
-    <div className="p-4 overflow-hidden">
+    <div className={clx("overflow-hidden", isWorkspace ? "p-0 xl:p-4" : "p-4")}>
       {!isWorkspace && <SideBar />}
       <Header />
       <div className={clx("flex-1 mt-[68px] xl:mt-[81px]", !isWorkspace && "xl:ms-[269px]", !isWorkspace && hasSubMenu && "xl:ms-[305px]")}>
-        <div className={clx(`overflow-auto w-[${window.innerWidth}] h-[calc(100vh-113px)] flex flex-col`)}>
-          <div className="flex-1 min-h-0">
+        <div
+          className={clx(
+            "flex flex-col",
+            isWorkspace ? "h-[calc(100dvh-68px)] xl:h-[calc(100dvh-97px)] overflow-hidden" : "overflow-auto h-[calc(100vh-113px)]",
+          )}
+        >
+          <div className={clx("flex-1 min-h-0", isWorkspace && "overflow-hidden")}>
             <Routes>
               <Route path={Pages.dashboard} element={<Home />} />
               <Route path={Pages.services.mine} element={<MyServices />} />
@@ -215,10 +220,10 @@ const MainRouter: FC = () => {
               <Route path={Pages.taskmanager.projectList} element={<ProjectList />} />
             </Routes>
           </div>
-          <div className="h-20 shrink-0 xl:hidden" />
+          {!isWorkspace && <div className="h-20 shrink-0 xl:hidden" />}
         </div>
       </div>
-      <Footer />
+      {!isWorkspace && <Footer />}
     </div>
   );
 };