From 6ac2a0c888dbea97e3a832c944c8c4e0cabb29bf Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Tue, 8 Jul 2025 16:13:56 +0530
Subject: [PATCH] refactor(task-list): improve layout and styling for better
 usability

- Removed unnecessary padding from task filters for a cleaner look.
- Adjusted height calculations to optimize space usage in the task list.
- Added padding to the content area to ensure the horizontal scrollbar is visible.
- Updated subtask count checks for clarity and consistency.
- Modified gap and margin values in project view header for improved alignment.
---
 .../src/components/task-list-v2/TaskListV2.tsx | 18 ++++++++++--------
 .../src/components/task-list-v2/TaskRow.tsx    |  6 +++---
 .../projectView/project-view-header.tsx        | 10 +++++-----
 .../projects/projectView/project-view.tsx      |  4 ++--
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
index 28d415ae..cf085758 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
@@ -525,7 +525,7 @@ const TaskListV2: React.FC = () => {
   if (groups.length === 0 && !loading) {
     return (
       <div className="flex flex-col bg-white dark:bg-gray-900 h-full">
-        <div className="flex-none px-6 py-4" style={{ height: '74px', flexShrink: 0 }}>
+        <div className="flex-none" style={{ height: '74px', flexShrink: 0 }}>
           <ImprovedTaskFilters position="list" />
         </div>
         <div className="flex-1 flex items-center justify-center">
@@ -552,18 +552,15 @@ const TaskListV2: React.FC = () => {
     >
       <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
         {/* Task Filters */}
-        <div className="flex-none px-6 py-4" style={{ height: '74px', flexShrink: 0 }}>
+        <div className="flex-none" style={{ height: '74px', flexShrink: 0 }}>
           <ImprovedTaskFilters position="list" />
         </div>
 
-        {/* Spacing between filters and table */}
-        <div className="flex-none h-4" style={{ flexShrink: 0 }}></div>
-
         {/* Table Container */}
         <div 
-          className="border border-gray-200 dark:border-gray-700 mx-6 rounded-lg" 
+          className="border border-gray-200 dark:border-gray-700 rounded-lg" 
           style={{ 
-            height: 'calc(100vh - 140px)',
+            height: 'calc(100vh - 130px)',
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden'
@@ -573,7 +570,12 @@ const TaskListV2: React.FC = () => {
           <div 
             ref={contentScrollRef}
             className="flex-1 bg-white dark:bg-gray-900 relative" 
-            style={{ overflowX: 'auto', overflowY: 'auto', minHeight: 0 }}
+            style={{ 
+              overflowX: 'auto', 
+              overflowY: 'auto', 
+              minHeight: 0,
+              paddingBottom: '20px' // Add padding to ensure horizontal scrollbar is visible
+            }}
           >
             {/* Sticky Column Headers */}
             <div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800" style={{ width: '100%', minWidth: 'max-content' }}>
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
index e85ab195..523b402e 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
@@ -301,7 +301,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
                 <button
                   onClick={handleToggleExpansion}
                   className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-1 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out flex-shrink-0 ${
-                    task.sub_tasks_count != null && Number(task.sub_tasks_count) > 0 
+                    task.sub_tasks_count != null && task.sub_tasks_count > 0 
                       ? 'opacity-100' 
                       : 'opacity-0 group-hover:opacity-100'
                   }`}
@@ -341,7 +341,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
                 {/* Indicators container - flex-shrink-0 to prevent compression */}
                 <div className="flex items-center gap-1 flex-shrink-0">
                   {/* Subtask count indicator - only show if count > 0 */}
-                  {!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count !== 0 && (
+                  {!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
                     <Tooltip title={t(`indicators.tooltips.subtasks${task.sub_tasks_count === 1 ? '' : '_plural'}`, { count: task.sub_tasks_count })}>
                       <div className="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-xs">
                         <span className="text-blue-600 dark:text-blue-400 font-medium">
@@ -446,7 +446,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'assignees':
         return (
-          <div className="flex items-center gap-1" style={baseStyle}>
+          <div className="flex items-center gap-1 px-2" style={baseStyle}>
             <AvatarGroup
               members={task.assignee_names || []}
               maxCount={3}
diff --git a/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx b/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
index c77c149d..32b17308 100644
--- a/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
@@ -340,7 +340,7 @@ const ProjectViewHeader = memo(() => {
     }
 
     return (
-      <Flex gap={8} align="center">
+      <Flex gap={4} align="center">
         {elements}
       </Flex>
     );
@@ -436,7 +436,7 @@ const ProjectViewHeader = memo(() => {
     }
 
     return (
-      <Flex gap={8} align="center">
+      <Flex gap={4} align="center">
         {actions}
       </Flex>
     );
@@ -460,11 +460,11 @@ const ProjectViewHeader = memo(() => {
   // Memoized page header title
   const pageHeaderTitle = useMemo(
     () => (
-      <Flex gap={8} align="center">
+      <Flex gap={4} align="center">
         <Tooltip title={t('navigateBackTooltip')}>
           <ArrowLeftOutlined style={{ fontSize: 16, cursor: 'pointer' }} onClick={handleNavigateToProjects} />
         </Tooltip>
-        <Typography.Title level={4} style={{ marginBlockEnd: 0, marginInlineStart: 12 }}>
+        <Typography.Title level={4} style={{ marginBlockEnd: 0, marginInlineStart: 8 }}>
           {selectedProject?.name}
         </Typography.Title>
         {projectAttributes}
@@ -477,7 +477,7 @@ const ProjectViewHeader = memo(() => {
   const pageHeaderStyle = useMemo(
     () => ({
       paddingInline: 0,
-      marginBlockEnd: 12,
+      marginBlockEnd: 8,
     }),
     []
   );
diff --git a/worklenz-frontend/src/pages/projects/projectView/project-view.tsx b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
index a18023f8..7509d74b 100644
--- a/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
@@ -344,14 +344,14 @@ const ProjectView = React.memo(() => {
   // Show loading state while project is being fetched
   if (projectLoading || !isInitialized) {
     return (
-      <div style={{ marginBlockStart: 80, marginBlockEnd: 16, minHeight: '80vh' }}>
+      <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
         <SuspenseFallback />
       </div>
     );
   }
 
   return (
-    <div style={{ marginBlockStart: 80, marginBlockEnd: 16, minHeight: '80vh' }}>
+    <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
       <ProjectViewHeader />
 
       <Tabs