From 072c1a6a3b286427937878cb80f8fc8d979b1181 Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Tue, 8 Jul 2025 17:10:56 +0530
Subject: [PATCH] refactor(task-list): improve layout and styling for task list
 and rows

- Adjusted padding and alignment in TaskListV2 for better visual consistency.
- Enhanced styling in TaskRow to ensure uniformity across various task elements.
- Updated flex properties for improved responsiveness and usability in task display.
---
 .../components/task-list-v2/TaskListV2.tsx    | 20 +++++--
 .../src/components/task-list-v2/TaskRow.tsx   | 54 +++++++++++--------
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
index 3d03267e..0d6f5df4 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
@@ -471,7 +471,7 @@ const TaskListV2: React.FC = () => {
   // Render column headers
   const renderColumnHeaders = useCallback(() => (
     <div className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700" style={{ width: '100%', minWidth: 'max-content' }}>
-      <div className="flex items-center px-3 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
+      <div className="flex items-center px-1 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
         {visibleColumns.map((column, index) => {
           const columnStyle: ColumnStyle = {
             width: column.width,
@@ -490,7 +490,21 @@ const TaskListV2: React.FC = () => {
             <div
               key={column.id}
               className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${
-                column.id === 'taskKey' ? 'pl-3' : ''
+                column.id === 'dragHandle'
+                  ? 'flex items-center justify-center'
+                  : column.id === 'checkbox'
+                  ? 'flex items-center justify-center'
+                  : column.id === 'taskKey'
+                  ? 'flex items-center pl-3'
+                  : column.id === 'title'
+                  ? 'flex items-center justify-between'
+                  : column.id === 'description'
+                  ? 'flex items-center px-2'
+                  : column.id === 'labels'
+                  ? 'flex items-center gap-0.5 flex-wrap min-w-0 px-2'
+                  : column.id === 'assignees'
+                  ? 'flex items-center px-2'
+                  : 'flex items-center justify-center px-2'
               }`}
               style={columnStyle}
             >
@@ -508,7 +522,7 @@ const TaskListV2: React.FC = () => {
           );
         })}
         {/* Add Custom Column Button - positioned at the end and scrolls with content */}
-        <div className="flex items-center justify-center ml-2" style={{ width: '50px', flexShrink: 0 }}>
+        <div className="flex items-center justify-center px-2" style={{ width: '50px', flexShrink: 0 }}>
           <AddCustomColumnButton />
         </div>
       </div>
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
index 08303a4b..b3130cf8 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
@@ -417,9 +417,9 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'description':
         return (
-          <div style={baseStyle} className="px-2">
+          <div className="flex items-center px-2" style={baseStyle}>
             <div
-              className="text-sm text-gray-600 dark:text-gray-400 truncate"
+              className="text-sm text-gray-600 dark:text-gray-400 truncate w-full"
               style={{
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -435,7 +435,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'status':
         return (
-          <div style={baseStyle}>
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
             <TaskStatusDropdown
               task={task}
               projectId={projectId}
@@ -463,7 +463,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'priority':
         return (
-          <div style={baseStyle}>
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
             <TaskPriorityDropdown
               task={task}
               projectId={projectId}
@@ -474,7 +474,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'dueDate':
         return (
-          <div style={baseStyle} className="relative group">
+          <div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
             {activeDatePicker === 'dueDate' ? (
               <div className="w-full relative">
                 <DatePicker
@@ -510,7 +510,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
               </div>
             ) : (
               <div 
-                className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors"
+                className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors text-center"
                 onClick={(e) => {
                   e.stopPropagation();
                   datePickerHandlers.setDueDate();
@@ -532,7 +532,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'progress':
         return (
-          <div style={baseStyle}>
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
             {task.progress !== undefined &&
               task.progress >= 0 &&
               (task.progress === 100 ? (
@@ -556,7 +556,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'labels':
         return (
-          <div className="flex items-center gap-0.5 flex-wrap min-w-0" style={{ ...baseStyle, minWidth: '150px', width: 'auto', flexGrow: 1 }}>
+          <div className="flex items-center gap-0.5 flex-wrap min-w-0 px-2" style={{ ...baseStyle, minWidth: '150px', width: 'auto', flexGrow: 1 }}>
             <TaskLabelsCell labels={task.labels} isDarkMode={isDarkMode} />
             <LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} />
           </div>
@@ -582,18 +582,22 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'estimation':
         return (
-          <div style={baseStyle}>
-            {task.timeTracking?.estimated && (
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
+            {task.timeTracking?.estimated ? (
               <span className="text-sm text-gray-500 dark:text-gray-400">
                 {task.timeTracking.estimated}h
               </span>
+            ) : (
+              <span className="text-sm text-gray-400 dark:text-gray-500">
+                0
+              </span>
             )}
           </div>
         );
 
       case 'startDate':
         return (
-          <div style={baseStyle} className="relative group">
+          <div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
             {activeDatePicker === 'startDate' ? (
               <div className="w-full relative">
                 <DatePicker
@@ -629,7 +633,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
               </div>
             ) : (
               <div 
-                className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors"
+                className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors text-center"
                 onClick={(e) => {
                   e.stopPropagation();
                   datePickerHandlers.setStartDate();
@@ -651,42 +655,50 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'completedDate':
         return (
-          <div style={baseStyle}>
-            {formattedDates.completed && (
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
+            {formattedDates.completed ? (
               <span className="text-sm text-gray-500 dark:text-gray-400">
                 {formattedDates.completed}
               </span>
+            ) : (
+              <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
             )}
           </div>
         );
 
       case 'createdDate':
         return (
-          <div style={baseStyle}>
-            {formattedDates.created && (
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
+            {formattedDates.created ? (
               <span className="text-sm text-gray-500 dark:text-gray-400">
                 {formattedDates.created}
               </span>
+            ) : (
+              <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
             )}
           </div>
         );
 
       case 'lastUpdated':
         return (
-          <div style={baseStyle}>
-            {formattedDates.updated && (
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
+            {formattedDates.updated ? (
               <span className="text-sm text-gray-500 dark:text-gray-400">
                 {formattedDates.updated}
               </span>
+            ) : (
+              <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
             )}
           </div>
         );
 
       case 'reporter':
         return (
-          <div style={baseStyle}>
-            {task.reporter && (
+          <div className="flex items-center justify-center px-2" style={baseStyle}>
+            {task.reporter ? (
               <span className="text-sm text-gray-500 dark:text-gray-400">{task.reporter}</span>
+            ) : (
+              <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
             )}
           </div>
         );
@@ -696,7 +708,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
         const column = visibleColumns.find(col => col.id === columnId);
         if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
           return (
-            <div style={baseStyle}>
+            <div className="flex items-center justify-center px-2" style={baseStyle}>
               <CustomColumnCell
                 column={column}
                 task={task}