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.

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,
     }),
     []
   );

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