Merge branch 'release-v2.1.4' of https://github.com/Worklenz/worklenz into feature/team-utilization

2025-07-31 06:57:50 +05:30
parent f085f87107 2bd6c19c13
commit 13984fcfd4
14 changed files with 858 additions and 808 deletions
--- a/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useCallback, useState } from 'react';
-import { useDroppable } from '@dnd-kit/core';
 // @ts-ignore: Heroicons module types
 import {
  ChevronDownIcon,
@@ -382,24 +381,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({
    t,
  ]);

-  // Make the group header droppable
-  const { isOver, setNodeRef } = useDroppable({
-    id: group.id,
-    data: {
-      type: 'group',
-      group,
-    },
-  });
-
  return (
    <div className="relative flex items-center">
      <div
-        ref={setNodeRef}
-        className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2 ${
-          isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
-        }`}
+        className="inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2"
        style={{
-          backgroundColor: isOver ? `${headerBackgroundColor}dd` : headerBackgroundColor,
+          backgroundColor: headerBackgroundColor,
          color: headerTextColor,
          position: 'sticky',
          top: 0,
--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
@@ -9,8 +9,9 @@ import {
  KeyboardSensor,
  TouchSensor,
  closestCenter,
-  useDroppable,
+  Modifier,
 } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
  SortableContext,
  verticalListSortingStrategy,
@@ -67,36 +68,102 @@ import TaskListSkeleton from './components/TaskListSkeleton';
 import ConvertToSubtaskDrawer from '@/components/task-list-common/convert-to-subtask-drawer/convert-to-subtask-drawer';
 import EmptyListPlaceholder from '@/components/EmptyListPlaceholder';

-// Empty Group Drop Zone Component
-const EmptyGroupDropZone: React.FC<{
-  groupId: string;
-  visibleColumns: any[];
-  t: (key: string) => string;
-}> = ({ groupId, visibleColumns, t }) => {
-  const { setNodeRef, isOver, active } = useDroppable({
-    id: `empty-group-${groupId}`,
-    data: {
-      type: 'group',
-      groupId: groupId,
-      isEmpty: true,
-    },
-  });
+// Drop Spacer Component - creates space between tasks when dragging
+const DropSpacer: React.FC<{ isVisible: boolean; visibleColumns: any[]; isDarkMode?: boolean }> = ({ 
+  isVisible, 
+  visibleColumns, 
+  isDarkMode = false 
+}) => {
+  if (!isVisible) return null;
  
  return (
    <div 
-      ref={setNodeRef}
-      className={`relative w-full transition-colors duration-200 ${
-        isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
-      }`}
-    >
-      <div
-        className="flex items-center min-w-max px-1 border-t border-b border-gray-200 dark:border-gray-700"
-        style={{ height: '40px' }}
+      className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 transition-all duration-200 ease-in-out"
+      style={{ 
+        height: isVisible ? '40px' : '0px',
+        opacity: isVisible ? 1 : 0,
+        marginTop: isVisible ? '2px' : '0px',
+        marginBottom: isVisible ? '2px' : '0px',
+        overflow: 'hidden',
+      }}
    >
      {visibleColumns.map((column, index) => {
+        // Calculate left position for sticky columns
+        let leftPosition = 0;
+        if (column.isSticky) {
+          for (let i = 0; i < index; i++) {
+            const prevColumn = visibleColumns[i];
+            if (prevColumn.isSticky) {
+              leftPosition += parseInt(prevColumn.width.replace('px', ''));
+            }
+          }
+        }
+
+        const columnStyle = {
+          width: column.width,
+          flexShrink: 0,
+          ...(column.isSticky && {
+            position: 'sticky' as const,
+            left: leftPosition,
+            zIndex: 10,
+            backgroundColor: 'inherit', // Inherit from parent spacer
+          }),
+        };
+        
+        if (column.id === 'title') {
+          return (
+            <div
+              key={`spacer-${column.id}`}
+              className="flex items-center pl-1 border-r border-blue-300 dark:border-blue-600"
+              style={columnStyle}
+            >
+              <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
+                Drop here
+              </span>
+            </div>
+          );
+        }
+        
+        return (
+          <div
+            key={`spacer-${column.id}`}
+            className="border-r border-blue-300 dark:border-blue-600"
+            style={columnStyle}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+// Empty Group Message Component
+const EmptyGroupMessage: React.FC<{ visibleColumns: any[]; isDarkMode?: boolean }> = ({ 
+  visibleColumns, 
+  isDarkMode = false 
+}) => {
+  return (
+    <div className="flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700" style={{ height: '40px' }}>
+      {visibleColumns.map((column, index) => {
+        // Calculate left position for sticky columns
+        let leftPosition = 0;
+        if (column.isSticky) {
+          for (let i = 0; i < index; i++) {
+            const prevColumn = visibleColumns[i];
+            if (prevColumn.isSticky) {
+              leftPosition += parseInt(prevColumn.width.replace('px', ''));
+            }
+          }
+        }
+
        const emptyColumnStyle = {
          width: column.width,
          flexShrink: 0,
+          ...(column.isSticky && {
+            position: 'sticky' as const,
+            left: leftPosition,
+            zIndex: 10,
+            backgroundColor: 'inherit', // Inherit from parent container
+          }),
        };
        
        // Show text in the title column
@@ -104,10 +171,10 @@ const EmptyGroupDropZone: React.FC<{
          return (
            <div
              key={`empty-${column.id}`}
-                className="flex items-center pl-1"
+              className="flex items-center pl-1 border-r border-gray-200 dark:border-gray-700"
              style={emptyColumnStyle}
            >
-                <span className="text-sm text-gray-500 dark:text-gray-400">
+              <span className="text-sm text-gray-500 dark:text-gray-400 italic">
                No tasks in this group
              </span>
            </div>
@@ -123,52 +190,9 @@ const EmptyGroupDropZone: React.FC<{
        );
      })}
    </div>
-      {isOver && active && (
-        <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
-      )}
-    </div>
  );
 };

-// Placeholder Drop Indicator Component
-const PlaceholderDropIndicator: React.FC<{
-  isVisible: boolean;
-  visibleColumns: any[];
-}> = ({ isVisible, visibleColumns }) => {
-  if (!isVisible) return null;
-
-  return (
-    <div
-      className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 rounded-md mx-1 my-1 transition-all duration-200 ease-in-out"
-      style={{ minWidth: 'max-content', height: '40px' }}
-    >
-      {visibleColumns.map((column, index) => {
-        const columnStyle = {
-          width: column.width,
-          flexShrink: 0,
-        };
-        return (
-          <div
-            key={`placeholder-${column.id}`}
-            className="flex items-center justify-center h-full"
-            style={columnStyle}
-          >
-            {/* Show "Drop task here" message in the title column */}
-            {column.id === 'title' && (
-              <div className="text-xs text-blue-600 dark:text-blue-400 font-medium opacity-75">
-                Drop task here
-              </div>
-            )}
-            {/* Show subtle placeholder content in other columns */}
-            {column.id !== 'title' && column.id !== 'dragHandle' && (
-              <div className="w-full h-4 mx-1 bg-white dark:bg-gray-700 rounded opacity-50" />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};

 // Hooks and utilities
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
@@ -211,7 +235,7 @@ const TaskListV2Section: React.FC = () => {

  // State hooks
  const [initializedFromDatabase, setInitializedFromDatabase] = useState(false);
-  const [addTaskRows, setAddTaskRows] = useState<{ [groupId: string]: string[] }>({});
+  const [addTaskRows, setAddTaskRows] = useState<{[groupId: string]: string[]}>({});

  // Configure sensors for drag and drop
  const sensors = useSensors(
@@ -232,7 +256,7 @@ const TaskListV2Section: React.FC = () => {
  );

  // Custom hooks
-  const { activeId, overId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
+  const { activeId, overId, dropPosition, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
    allTasks,
    groups
  );
@@ -463,7 +487,7 @@ const TaskListV2Section: React.FC = () => {
      const newRowId = `add-task-${groupId}-${currentRows.length + 1}`;
      return {
        ...prev,
-        [groupId]: [...currentRows, newRowId],
+        [groupId]: [...currentRows, newRowId]
      };
    });
  }, []);
@@ -516,7 +540,7 @@ const TaskListV2Section: React.FC = () => {
              projectId: urlProjectId,
              rowId: rowId,
              autoFocus: index === groupAddRows.length - 1, // Auto-focus the latest row
-            })),
+            }))
          ]
        : [];

@@ -545,6 +569,7 @@ const TaskListV2Section: React.FC = () => {
    return virtuosoGroups.flatMap(group => group.tasks);
  }, [virtuosoGroups]);

+
  // Render functions
  const renderGroup = useCallback(
    (groupIndex: number) => {
@@ -566,12 +591,12 @@ const TaskListV2Section: React.FC = () => {
            projectId={urlProjectId || ''}
          />
          {isGroupEmpty && !isGroupCollapsed && (
-            <EmptyGroupDropZone groupId={group.id} visibleColumns={visibleColumns} t={t} />
+            <EmptyGroupMessage visibleColumns={visibleColumns} isDarkMode={isDarkMode} />
          )}
        </div>
      );
    },
-    [virtuosoGroups, collapsedGroups, handleGroupCollapse, visibleColumns, t]
+    [virtuosoGroups, collapsedGroups, handleGroupCollapse, visibleColumns, t, isDarkMode]
  );

  const renderTask = useCallback(
@@ -612,19 +637,40 @@ const TaskListV2Section: React.FC = () => {
  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' }}
+        className="border-b border-gray-200 dark:border-gray-700"
+        style={{ 
+          width: '100%', 
+          minWidth: 'max-content',
+          backgroundColor: isDarkMode ? '#141414' : '#f9fafb' 
+        }}
      >
        <div
          className="flex items-center px-1 py-3 w-full"
          style={{ minWidth: 'max-content', height: '44px' }}
        >
          {visibleColumns.map((column, index) => {
+            // Calculate left position for sticky columns
+            let leftPosition = 0;
+            if (column.isSticky) {
+              for (let i = 0; i < index; i++) {
+                const prevColumn = visibleColumns[i];
+                if (prevColumn.isSticky) {
+                  leftPosition += parseInt(prevColumn.width.replace('px', ''));
+                }
+              }
+            }
+
            const columnStyle: ColumnStyle = {
              width: column.width,
              flexShrink: 0,
              ...((column as any).minWidth && { minWidth: (column as any).minWidth }),
              ...((column as any).maxWidth && { maxWidth: (column as any).maxWidth }),
+              ...(column.isSticky && {
+                position: 'sticky' as const,
+                left: leftPosition,
+                zIndex: 15,
+                backgroundColor: isDarkMode ? '#141414' : '#f9fafb', // custom dark header : bg-gray-50
+              }),
            };

            return (
@@ -701,7 +747,7 @@ const TaskListV2Section: React.FC = () => {
        color: '#fbc84c69',
        actualCount: 0,
        count: 1, // For the add task row
-        startIndex: 0,
+        startIndex: 0
      };
     
      return (
@@ -789,12 +835,24 @@ const TaskListV2Section: React.FC = () => {
  }

  return (
+    <>
+      {/* CSS for sticky column hover effects */}
+      <style>
+        {`
+          .hover\\:bg-gray-50:hover .sticky-column-hover,
+          .dark .hover\\:bg-gray-800:hover .sticky-column-hover {
+            background-color: var(--hover-bg) !important;
+          }
+        `}
+      </style>
+      
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragStart={handleDragStart}
        onDragOver={handleDragOver}
        onDragEnd={handleDragEnd}
+        modifiers={[restrictToVerticalAxis]}
      >
      <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
        {/* Table Container */}
@@ -839,63 +897,31 @@ const TaskListV2Section: React.FC = () => {
                    {renderGroup(groupIndex)}

                    {/* Group Tasks */}
-                    {!collapsedGroups.has(group.id) &&
-                      (group.tasks.length > 0
-                        ? group.tasks.map((task, taskIndex) => {
+                    {!collapsedGroups.has(group.id) && (
+                      group.tasks.length > 0 ? (
+                        group.tasks.map((task, taskIndex) => {
                        const globalTaskIndex =
-                              virtuosoGroups
-                                .slice(0, groupIndex)
-                                .reduce((sum, g) => sum + g.count, 0) + taskIndex;
+                          virtuosoGroups.slice(0, groupIndex).reduce((sum, g) => sum + g.count, 0) +
+                          taskIndex;

                        // Check if this is the first actual task in the group (not AddTaskRow)
                        const isFirstTaskInGroup = taskIndex === 0 && !('isAddTaskRow' in task);
                        
-                            // Check if we should show drop indicators
-                            const isTaskBeingDraggedOver = overId === task.id;
-                            const isGroupBeingDraggedOver = overId === group.id;
-                            const isFirstTaskInGroupBeingDraggedOver =
-                              isFirstTaskInGroup && isTaskBeingDraggedOver;
+                        // Check if we should show drop spacer
+                        const isOverThisTask = activeId && overId === task.id && !('isAddTaskRow' in task);
+                        const showDropSpacerBefore = isOverThisTask && dropPosition === 'before';
+                        const showDropSpacerAfter = isOverThisTask && dropPosition === 'after';

                        return (
                          <div key={task.id || `add-task-${group.id}-${taskIndex}`}>
-                                {/* Placeholder drop indicator before first task in group */}
-                                {isFirstTaskInGroupBeingDraggedOver && (
-                                  <PlaceholderDropIndicator
-                                    isVisible={true}
-                                    visibleColumns={visibleColumns}
-                                  />
-                                )}
-
-                                {/* Placeholder drop indicator between tasks */}
-                                {isTaskBeingDraggedOver && !isFirstTaskInGroup && (
-                                  <PlaceholderDropIndicator
-                                    isVisible={true}
-                                    visibleColumns={visibleColumns}
-                                  />
-                                )}
-
+                            {showDropSpacerBefore && <DropSpacer isVisible={true} visibleColumns={visibleColumns} isDarkMode={isDarkMode} />}
                            {renderTask(globalTaskIndex, isFirstTaskInGroup)}
-
-                                {/* Placeholder drop indicator at end of group when dragging over group */}
-                                {isGroupBeingDraggedOver &&
-                                  taskIndex === group.tasks.length - 1 && (
-                                    <PlaceholderDropIndicator
-                                      isVisible={true}
-                                      visibleColumns={visibleColumns}
-                                    />
-                                  )}
+                            {showDropSpacerAfter && <DropSpacer isVisible={true} visibleColumns={visibleColumns} isDarkMode={isDarkMode} />}
                          </div>
                        );
                      })
-                        : // Handle empty groups with placeholder drop indicator
-                          overId === group.id && (
-                            <div style={{ minWidth: 'max-content' }}>
-                              <PlaceholderDropIndicator
-                                isVisible={true}
-                                visibleColumns={visibleColumns}
-                              />
-                            </div>
-                          ))}
+                      ) : null
+                    )}
                  </div>
                ))}
              </div>
@@ -904,15 +930,15 @@ const TaskListV2Section: React.FC = () => {
        </div>

        {/* Drag Overlay */}
-        <DragOverlay dropAnimation={{ duration: 200, easing: 'ease-in-out' }}>
+        <DragOverlay dropAnimation={{ duration: 200, easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)' }}>
          {activeId ? (
            <div 
-              className="bg-white dark:bg-gray-800 shadow-lg rounded-md border border-blue-400 dark:border-blue-500 opacity-90"
+              className="bg-white dark:bg-gray-800 shadow-2xl rounded-lg border-2 border-blue-500 dark:border-blue-400 opacity-95"
              style={{ width: visibleColumns.find(col => col.id === 'title')?.width || '300px' }}
            >
-              <div className="px-3 py-2">
-                <div className="flex items-center gap-2">
-                  <HolderOutlined className="text-gray-400 dark:text-gray-500 text-xs" />
+              <div className="px-4 py-3">
+                <div className="flex items-center gap-3">
+                  <HolderOutlined className="text-blue-500 dark:text-blue-400 text-sm" />
                  <div className="text-sm font-medium text-gray-900 dark:text-white truncate flex-1">
                    {allTasks.find(task => task.id === activeId)?.name ||
                      allTasks.find(task => task.id === activeId)?.title ||
@@ -964,6 +990,7 @@ const TaskListV2Section: React.FC = () => {
        {createPortal(<ConvertToSubtaskDrawer />, document.body, 'convert-to-subtask-drawer')}
      </div>
    </DndContext>
+    </>
  );
 };

--- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
@@ -27,16 +27,15 @@ interface TaskRowProps {
  depth?: number;
 }

-const TaskRow: React.FC<TaskRowProps> = memo(
-  ({
+const TaskRow: React.FC<TaskRowProps> = memo(({ 
  taskId, 
  projectId, 
  visibleColumns, 
  isSubtask = false, 
  isFirstInGroup = false, 
  updateTaskCustomColumnValue,
-    depth = 0,
-  }) => {
+  depth = 0
+}) => {
  // Get task data and selection state from Redux
  const task = useAppSelector(state => selectTaskById(state, taskId));
  const isSelected = useAppSelector(state => selectIsTaskSelected(state, taskId));
@@ -63,7 +62,11 @@ const TaskRow: React.FC<TaskRowProps> = memo(
    labelsAdapter,
  } = useTaskRowState(task);

-    const { handleCheckboxChange, handleTaskNameSave, handleTaskNameEdit } = useTaskRowActions({
+  const {
+    handleCheckboxChange,
+    handleTaskNameSave,
+    handleTaskNameEdit,
+  } = useTaskRowActions({
    task,
    taskId,
    taskName,
@@ -72,7 +75,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(
  });

  // Drag and drop functionality - only enable for parent tasks
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({
    id: task.id,
    data: {
      type: 'task',
@@ -110,32 +113,47 @@ const TaskRow: React.FC<TaskRowProps> = memo(
  });

  // Memoize style object to prevent unnecessary re-renders
-    const style = useMemo(
-      () => ({
+  const style = useMemo(() => ({
    transform: CSS.Transform.toString(transform),
    transition,
-        opacity: isDragging ? 0 : 1, // Completely hide the original task while dragging
-      }),
-      [transform, transition, isDragging]
-    );
+    opacity: isDragging ? 0.3 : 1, // Make original task slightly transparent while dragging
+  }), [transform, transition, isDragging]);

  return (
    <div
      ref={setNodeRef}
      style={{ ...style, height: '40px' }}
-        className={`flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 ${
+      className={`flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
        isFirstInGroup ? 'border-t border-gray-200 dark:border-gray-700' : ''
-        } ${isDragging ? 'shadow-lg border border-blue-300' : ''}`}
+      } ${
+        isDragging ? 'opacity-50' : ''
+      } ${
+        isOver && !isDragging ? 'bg-blue-50 dark:bg-blue-900/20' : ''
+      }`}
    >
-        {visibleColumns.map((column, index) => (
+      {visibleColumns.map((column, index) => {
+        // Calculate background state for sticky columns - custom dark mode colors
+        const rowBackgrounds = {
+          normal: isDarkMode ? '#1e1e1e' : '#ffffff', // custom dark : bg-white
+          hover: isDarkMode ? '#1f2937' : '#f9fafb', // slightly lighter dark : bg-gray-50  
+          dragOver: isDarkMode ? '#1e3a8a33' : '#dbeafe', // bg-blue-900/20 : bg-blue-50
+        };
+        
+        let currentBg = rowBackgrounds.normal;
+        if (isOver && !isDragging) {
+          currentBg = rowBackgrounds.dragOver;
+        }
+        // Note: hover state is handled by CSS, so we'll use a CSS custom property
+        
+        return (
          <React.Fragment key={column.id}>
-            {renderColumn(column.id, column.width, column.isSticky, index)}
+            {renderColumn(column.id, column.width, column.isSticky, index, currentBg, rowBackgrounds)}
          </React.Fragment>
-        ))}
+        );
+      })}
    </div>
  );
-  }
-);
+});

 TaskRow.displayName = 'TaskRow';

--- a/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
@@ -19,10 +19,11 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
  const currentSession = useAuthService().getCurrentSession();
  const [activeId, setActiveId] = useState<string | null>(null);
  const [overId, setOverId] = useState<string | null>(null);
+  const [dropPosition, setDropPosition] = useState<'before' | 'after' | null>(null);

-  // Helper function to emit socket event for persistence
+  // Helper function to emit socket event for persistence (within-group only)
  const emitTaskSortChange = useCallback(
-    (taskId: string, sourceGroup: TaskGroup, targetGroup: TaskGroup, insertIndex: number) => {
+    (taskId: string, group: TaskGroup, insertIndex: number) => {
      if (!socket || !connected || !projectId) {
        logger.warning('Socket not connected or missing project ID');
        return;
@@ -40,54 +41,30 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
      // Use new bulk update approach - recalculate ALL task orders to prevent duplicates
      const taskUpdates: any[] = [];
      
-      // Create a copy of all groups and perform the move operation
-      const updatedGroups = groups.map(group => ({
-        ...group,
-        taskIds: [...group.taskIds],
+      // Create a copy of all groups
+      const updatedGroups = groups.map(g => ({
+        ...g,
+        taskIds: [...g.taskIds]
      }));
      
-      // Find the source and target groups in our copy
-      const sourceGroupCopy = updatedGroups.find(g => g.id === sourceGroup.id)!;
-      const targetGroupCopy = updatedGroups.find(g => g.id === targetGroup.id)!;
+      // Find the group in our copy
+      const groupCopy = updatedGroups.find(g => g.id === group.id)!;
      
-      if (sourceGroup.id === targetGroup.id) {
-        // Same group - reorder within the group
-        const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
+      // Reorder within the group
+      const sourceIndex = groupCopy.taskIds.indexOf(taskId);
      // Remove task from old position
-        sourceGroupCopy.taskIds.splice(sourceIndex, 1);
+      groupCopy.taskIds.splice(sourceIndex, 1);
      // Insert at new position
-        sourceGroupCopy.taskIds.splice(insertIndex, 0, taskId);
-      } else {
-        // Different groups - move task between groups
-        // Remove from source group
-        const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
-        sourceGroupCopy.taskIds.splice(sourceIndex, 1);
-
-        // Add to target group
-        targetGroupCopy.taskIds.splice(insertIndex, 0, taskId);
-      }
+      groupCopy.taskIds.splice(insertIndex, 0, taskId);
      
      // Now assign sequential sort orders to ALL tasks across ALL groups
      let currentSortOrder = 0;
-      updatedGroups.forEach(group => {
-        group.taskIds.forEach(id => {
-          const update: any = {
+      updatedGroups.forEach(grp => {
+        grp.taskIds.forEach(id => {
+          taskUpdates.push({
            task_id: id,
-            sort_order: currentSortOrder,
-          };
-
-          // Add group-specific fields for the moved task if it changed groups
-          if (id === taskId && sourceGroup.id !== targetGroup.id) {
-            if (currentGrouping === 'status') {
-              update.status_id = targetGroup.id;
-            } else if (currentGrouping === 'priority') {
-              update.priority_id = targetGroup.id;
-            } else if (currentGrouping === 'phase') {
-              update.phase_id = targetGroup.id;
-            }
-          }
-
-          taskUpdates.push(update);
+            sort_order: currentSortOrder
+          });
          currentSortOrder++;
        });
      });
@@ -96,8 +73,8 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
        project_id: projectId,
        group_by: currentGrouping || 'status',
        task_updates: taskUpdates,
-        from_group: sourceGroup.id,
-        to_group: targetGroup.id,
+        from_group: group.id,
+        to_group: group.id,
        task: {
          id: task.id,
          project_id: projectId,
@@ -108,38 +85,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
      };

      socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData);
-
-      // Also emit the specific grouping field change event for the moved task
-      if (sourceGroup.id !== targetGroup.id) {
-        if (currentGrouping === 'phase') {
-          // Emit phase change event
-          socket.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
-            task_id: taskId,
-            phase_id: targetGroup.id,
-            parent_task: task.parent_task_id || null,
-          });
-        } else if (currentGrouping === 'priority') {
-          // Emit priority change event
-          socket.emit(
-            SocketEvents.TASK_PRIORITY_CHANGE.toString(),
-            JSON.stringify({
-              task_id: taskId,
-              priority_id: targetGroup.id,
-              team_id: teamId,
-            })
-          );
-        } else if (currentGrouping === 'status') {
-          // Emit status change event
-          socket.emit(
-            SocketEvents.TASK_STATUS_CHANGE.toString(),
-            JSON.stringify({
-              task_id: taskId,
-              status_id: targetGroup.id,
-              team_id: teamId,
-            })
-          );
-        }
-      }
    },
    [socket, connected, projectId, allTasks, groups, currentGrouping, currentSession]
  );
@@ -154,32 +99,38 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {

      if (!over) {
        setOverId(null);
+        setDropPosition(null);
        return;
      }

-      const activeId = active.id;
-      const overId = over.id;
+      const activeTask = allTasks.find(task => task.id === active.id);
+      const overTask = allTasks.find(task => task.id === over.id);
      
-      // Set the overId for drop indicators
-      setOverId(overId as string);
-
-      // Find the active task and the item being dragged over
-      const activeTask = allTasks.find(task => task.id === activeId);
-      if (!activeTask) return;
-
-      // Check if we're dragging over a task or a group
-      const overTask = allTasks.find(task => task.id === overId);
-      const overGroup = groups.find(group => group.id === overId);
-
-      // Find the groups
+      if (activeTask && overTask) {
        const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
-      let targetGroup = overGroup;
+        const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
        
-      if (overTask) {
-        targetGroup = groups.find(group => group.taskIds.includes(overTask.id));
+        // Only set overId if both tasks are in the same group
+        if (activeGroup && overGroup && activeGroup.id === overGroup.id) {
+          setOverId(over.id as string);
+          
+          // Calculate drop position based on task indices
+          const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
+          const overIndex = activeGroup.taskIds.indexOf(overTask.id);
+          
+          if (activeIndex < overIndex) {
+            setDropPosition('after');
+          } else {
+            setDropPosition('before');
+          }
+        } else {
+          setOverId(null);
+          setDropPosition(null);
+        }
+      } else {
+        setOverId(null);
+        setDropPosition(null);
      }
-
-      if (!activeGroup || !targetGroup) return;
    },
    [allTasks, groups]
  );
@@ -189,6 +140,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
      const { active, over } = event;
      setActiveId(null);
      setOverId(null);
+      setDropPosition(null);

      if (!over || active.id === over.id) {
        return;
@@ -204,86 +156,50 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
        return;
      }

-      // Find the groups
+      // Find the active task's group
      const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
      if (!activeGroup) {
        logger.error('Could not find active group for task:', activeId);
        return;
      }

-      // Check if we're dropping on a task, group, or empty group
+      // Only allow dropping on tasks in the same group
      const overTask = allTasks.find(task => task.id === overId);
-      const overGroup = groups.find(group => group.id === overId);
-
-      // Check if dropping on empty group drop zone
-      const isEmptyGroupDrop = typeof overId === 'string' && overId.startsWith('empty-group-');
-      const emptyGroupId = isEmptyGroupDrop ? overId.replace('empty-group-', '') : null;
-      const emptyGroup = emptyGroupId ? groups.find(group => group.id === emptyGroupId) : null;
-
-      let targetGroup = overGroup || emptyGroup;
-      let insertIndex = 0;
-
-      if (overTask) {
-        // Dropping on a task
-        targetGroup = groups.find(group => group.taskIds.includes(overTask.id));
-        if (targetGroup) {
-          insertIndex = targetGroup.taskIds.indexOf(overTask.id);
-        }
-      } else if (overGroup) {
-        // Dropping on a group (at the end)
-        targetGroup = overGroup;
-        insertIndex = targetGroup.taskIds.length;
-      } else if (emptyGroup) {
-        // Dropping on an empty group
-        targetGroup = emptyGroup;
-        insertIndex = 0; // First position in empty group
-      }
-
-      if (!targetGroup) {
-        logger.error('Could not find target group');
+      if (!overTask) {
+        return;
+      }
+
+      const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
+      if (!overGroup || overGroup.id !== activeGroup.id) {
        return;
      }

-      const isCrossGroup = activeGroup.id !== targetGroup.id;
      const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
+      const overIndex = activeGroup.taskIds.indexOf(overTask.id);

-      if (isCrossGroup) {
-        // Moving task between groups
-        console.log('Moving task between groups:', {
-          task: activeTask.name || activeTask.title,
-          from: activeGroup.title,
-          to: targetGroup.title,
-          newPosition: insertIndex,
-        });
-
-        // reorderTasksInGroup handles both same-group and cross-group moves
-        // No need for separate moveTaskBetweenGroups call
+      if (activeIndex !== overIndex) {
+        // Reorder task within same group
        dispatch(
          reorderTasksInGroup({
            sourceTaskId: activeId as string,
-            destinationTaskId: over.id as string,
-            sourceGroupId: activeGroup.id,
-            destinationGroupId: targetGroup.id,
-          })
-        );
-
-        // Emit socket event for persistence
-        emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
-      } else {
-        if (activeIndex !== insertIndex) {
-          // Reorder task within same group at drop position
-          dispatch(
-            reorderTasksInGroup({
-              sourceTaskId: activeId as string,
-              destinationTaskId: over.id as string,
+            destinationTaskId: overId as string,
            sourceGroupId: activeGroup.id,
            destinationGroupId: activeGroup.id,
          })
        );

-          // Emit socket event for persistence
-          emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
+        // Calculate the final index after reordering for socket emission
+        let finalIndex = overIndex;
+        if (activeIndex < overIndex) {
+          // When dragging down, the task ends up just after the destination
+          finalIndex = overIndex;
+        } else {
+          // When dragging up, the task ends up at the destination position
+          finalIndex = overIndex;
        }
+
+        // Emit socket event for persistence
+        emitTaskSortChange(activeId as string, activeGroup, finalIndex);
      }
    },
    [allTasks, groups, dispatch, emitTaskSortChange]
@@ -292,6 +208,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
  return {
    activeId,
    overId,
+    dropPosition,
    handleDragStart,
    handleDragOver,
    handleDragEnd,
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
@@ -89,8 +89,30 @@ export const useTaskRowColumns = ({
  listeners,
  depth = 0,
 }: UseTaskRowColumnsProps) => {
-  const renderColumn = useCallback(
-    (columnId: string, width: string, isSticky?: boolean, index?: number) => {
+  
+  const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number, currentBg?: string, rowBackgrounds?: any) => {
+    // Calculate left position for sticky columns
+    let leftPosition = 0;
+    if (isSticky && typeof index === 'number') {
+      for (let i = 0; i < index; i++) {
+        const prevColumn = visibleColumns[i];
+        if (prevColumn.isSticky) {
+          leftPosition += parseInt(prevColumn.width.replace('px', ''));
+        }
+      }
+    }
+
+    // Create wrapper style for sticky positioning
+    const wrapperStyle = isSticky ? {
+      position: 'sticky' as const,
+      left: leftPosition,
+      zIndex: 5, // Lower than header but above regular content
+      backgroundColor: currentBg || (isDarkMode ? '#1e1e1e' : '#ffffff'), // Use dynamic background or fallback
+      overflow: 'hidden', // Prevent content from spilling over
+      width: width, // Ensure the wrapper respects column width
+    } : {};
+
+    const renderColumnContent = () => {
      switch (columnId) {
        case 'dragHandle':
          return (
@@ -112,7 +134,12 @@ export const useTaskRowColumns = ({
        );

      case 'taskKey':
-          return <TaskKeyColumn width={width} taskKey={task.task_key || ''} />;
+        return (
+          <TaskKeyColumn
+            width={width}
+            taskKey={task.task_key || ''}
+          />
+        );

      case 'title':
        return (
@@ -132,11 +159,21 @@ export const useTaskRowColumns = ({
        );

      case 'description':
-          return <DescriptionColumn width={width} description={task.description || ''} />;
+        return (
+          <DescriptionColumn
+            width={width}
+            description={task.description || ''}
+          />
+        );

      case 'status':
        return (
-            <StatusColumn width={width} task={task} projectId={projectId} isDarkMode={isDarkMode} />
+          <StatusColumn
+            width={width}
+            task={task}
+            projectId={projectId}
+            isDarkMode={isDarkMode}
+          />
        );

      case 'assignees':
@@ -188,7 +225,12 @@ export const useTaskRowColumns = ({
        );

      case 'progress':
-          return <ProgressColumn width={width} task={task} />;
+        return (
+          <ProgressColumn
+            width={width}
+            task={task}
+          />
+        );

      case 'labels':
        return (
@@ -203,46 +245,99 @@ export const useTaskRowColumns = ({

      case 'phase':
        return (
-            <PhaseColumn width={width} task={task} projectId={projectId} isDarkMode={isDarkMode} />
+          <PhaseColumn
+            width={width}
+            task={task}
+            projectId={projectId}
+            isDarkMode={isDarkMode}
+          />
        );

      case 'timeTracking':
        return (
-            <TimeTrackingColumn width={width} taskId={task.id || ''} isDarkMode={isDarkMode} />
+          <TimeTrackingColumn
+            width={width}
+            taskId={task.id || ''}
+            isDarkMode={isDarkMode}
+          />
        );

      case 'estimation':
-          return <EstimationColumn width={width} task={task} />;
+        return (
+          <EstimationColumn
+            width={width}
+            task={task}
+          />
+        );

      case 'completedDate':
-          return <DateColumn width={width} formattedDate={formattedDates.completed} />;
+        return (
+          <DateColumn
+            width={width}
+            formattedDate={formattedDates.completed}
+          />
+        );

      case 'createdDate':
-          return <DateColumn width={width} formattedDate={formattedDates.created} />;
+        return (
+          <DateColumn
+            width={width}
+            formattedDate={formattedDates.created}
+          />
+        );

      case 'lastUpdated':
-          return <DateColumn width={width} formattedDate={formattedDates.updated} />;
+        return (
+          <DateColumn
+            width={width}
+            formattedDate={formattedDates.updated}
+          />
+        );

      case 'reporter':
-          return <ReporterColumn width={width} reporter={task.reporter || ''} />;
+        return (
+          <ReporterColumn
+            width={width}
+            reporter={task.reporter || ''}
+          />
+        );

      default:
        // Handle custom columns
        const column = visibleColumns.find(col => col.id === columnId);
        if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
          return (
-              <CustomColumn
+            <DragHandleColumn
              width={width}
-                column={column}
-                task={task}
-                updateTaskCustomColumnValue={updateTaskCustomColumnValue}
+              isSubtask={isSubtask}
+              attributes={attributes}
+              listeners={listeners}
            />
          );
        }
        return null;
      }
-    },
-    [
+    };
+
+    // Wrap content with sticky positioning if needed
+    const content = renderColumnContent();
+    if (isSticky) {
+      const hoverBg = rowBackgrounds?.hover || (isDarkMode ? '#2a2a2a' : '#f9fafb');
+      return (
+        <div 
+          style={{
+            ...wrapperStyle,
+            '--hover-bg': hoverBg,
+          } as React.CSSProperties}
+          className="border-r border-gray-200 dark:border-gray-700 overflow-hidden sticky-column-hover hover:bg-[var(--hover-bg)]"
+        >
+          {content}
+        </div>
+      );
+    }
+    
+    return content;
+  }, [
    task,
    projectId,
    isSubtask,
@@ -266,8 +361,8 @@ export const useTaskRowColumns = ({
    handleTaskNameEdit,
    attributes,
    listeners,
-    ]
-  );
+    depth,
+  ]);

  return { renderColumn };
 };
--- a/worklenz-frontend/src/components/task-management/task-status-dropdown.tsx
+++ b/worklenz-frontend/src/components/task-management/task-status-dropdown.tsx
@@ -8,6 +8,8 @@ import { Task } from '@/types/task-management.types';
 import {
  updateTask,
  selectCurrentGroupingV3,
+  selectGroups,
+  moveTaskBetweenGroups,
 } from '@/features/task-management/task-management.slice';

 interface TaskStatusDropdownProps {
@@ -30,6 +32,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({

  const statusList = useAppSelector(state => state.taskStatusReducer.status);
  const currentGroupingV3 = useAppSelector(selectCurrentGroupingV3);
+  const groups = useAppSelector(selectGroups);

  // Find current status details
  const currentStatus = useMemo(() => {
@@ -44,21 +47,53 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
    (statusId: string, statusName: string) => {
      if (!task.id || !statusId || !connected) return;

-      console.log('🎯 Status change initiated:', { taskId: task.id, statusId, statusName });
+      // Optimistic update: immediately update the task status in Redux for instant feedback
+      const updatedTask = {
+        ...task,
+        status: statusId,
+        updatedAt: new Date().toISOString(),
+      };
+      dispatch(updateTask(updatedTask));

+      // Handle group movement if grouping by status
+      if (currentGroupingV3 === 'status' && groups && groups.length > 0) {
+        // Find current group containing the task
+        const currentGroup = groups.find(group => group.taskIds.includes(task.id));
+        
+        // Find target group based on the new status ID
+        let targetGroup = groups.find(group => group.id === statusId);
+        
+        // If not found by status ID, try matching with group value
+        if (!targetGroup) {
+          targetGroup = groups.find(group => group.groupValue === statusId);
+        }
+
+        if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
+          // Move task between groups immediately for instant feedback
+          dispatch(
+            moveTaskBetweenGroups({
+              taskId: task.id,
+              sourceGroupId: currentGroup.id,
+              targetGroupId: targetGroup.id,
+            })
+          );
+        }
+      }
+
+      // Emit socket event for server-side update and real-time sync
      socket?.emit(
        SocketEvents.TASK_STATUS_CHANGE.toString(),
        JSON.stringify({
          task_id: task.id,
          status_id: statusId,
-          parent_task: null, // Assuming top-level tasks for now
-          team_id: projectId, // Using projectId as teamId
+          parent_task: task.parent_task_id || null,
+          team_id: projectId,
        })
      );
      socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
      setIsOpen(false);
    },
-    [task.id, connected, socket, projectId]
+    [task, connected, socket, projectId, dispatch, currentGroupingV3, groups]
  );

  // Calculate dropdown position and handle outside clicks
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -706,8 +706,23 @@ const taskManagementSlice = createSlice({
        const group = state.groups.find(g => g.id === sourceGroupId);
        if (group) {
          const newTasks = Array.from(group.taskIds);
-          const [removed] = newTasks.splice(newTasks.indexOf(sourceTaskId), 1);
-          newTasks.splice(newTasks.indexOf(destinationTaskId), 0, removed);
+          const sourceIndex = newTasks.indexOf(sourceTaskId);
+          const destinationIndex = newTasks.indexOf(destinationTaskId);
+          
+          // Remove the task from its current position
+          const [removed] = newTasks.splice(sourceIndex, 1);
+          
+          // Calculate the insertion index
+          let insertIndex = destinationIndex;
+          if (sourceIndex < destinationIndex) {
+            // When dragging down, we need to insert after the destination
+            insertIndex = destinationIndex;
+          } else {
+            // When dragging up, we insert before the destination
+            insertIndex = destinationIndex;
+          }
+          
+          newTasks.splice(insertIndex, 0, removed);
          group.taskIds = newTasks;

          // Update order for affected tasks using the appropriate sort field
--- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
+++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
@@ -244,47 +244,18 @@ export const useTaskSocketHandlers = () => {
          // Find current group containing the task
          const currentGroup = groups.find(group => group.taskIds.includes(response.id));

-          // Find target group based on new status value with multiple matching strategies
-          let targetGroup = groups.find(group => group.groupValue === newStatusValue);
+          // Find target group based on the actual status ID from response
+          let targetGroup = groups.find(group => group.id === response.status_id);
          
-          // If not found, try case-insensitive matching
+          // If not found by status ID, try matching with group value
          if (!targetGroup) {
-            targetGroup = groups.find(
-              group => group.groupValue?.toLowerCase() === newStatusValue.toLowerCase()
-            );
+            targetGroup = groups.find(group => group.groupValue === response.status_id);
          }
          
-          // If still not found, try matching with title
-          if (!targetGroup) {
-            targetGroup = groups.find(
-              group => group.title?.toLowerCase() === newStatusValue.toLowerCase()
-            );
-          }
-
-          // If still not found, try matching common status patterns
-          if (!targetGroup && newStatusValue === 'todo') {
-            targetGroup = groups.find(
-              group =>
-                group.title?.toLowerCase().includes('todo') ||
-                group.title?.toLowerCase().includes('to do') ||
-                group.title?.toLowerCase().includes('pending') ||
-                group.groupValue?.toLowerCase().includes('todo')
-            );
-          } else if (!targetGroup && newStatusValue === 'doing') {
-            targetGroup = groups.find(
-              group =>
-                group.title?.toLowerCase().includes('doing') ||
-                group.title?.toLowerCase().includes('progress') ||
-                group.title?.toLowerCase().includes('active') ||
-                group.groupValue?.toLowerCase().includes('doing')
-            );
-          } else if (!targetGroup && newStatusValue === 'done') {
-            targetGroup = groups.find(
-              group =>
-                group.title?.toLowerCase().includes('done') ||
-                group.title?.toLowerCase().includes('complete') ||
-                group.title?.toLowerCase().includes('finish') ||
-                group.groupValue?.toLowerCase().includes('done')
+          // If still not found, try matching by status name (fallback)
+          if (!targetGroup && response.status) {
+            targetGroup = groups.find(group => 
+              group.title?.toLowerCase() === response.status.toLowerCase()
            );
          }

@@ -298,14 +269,11 @@ export const useTaskSocketHandlers = () => {
              })
            );
          } else if (!targetGroup) {
-            console.log('❌ Target group not found for status:', newStatusValue);
-          } else if (!currentGroup) {
-            console.log('❌ Current group not found for task:', response.id);
-          } else {
-            console.log('🔧 No group movement needed - task already in correct group');
+            // Fallback: refetch tasks to ensure consistency
+            if (projectId) {
+              dispatch(fetchTasksV3(projectId));
+            }
          }
-        } else {
-          console.log('🔧 Not grouped by status, skipping group movement');
        }
      }
    },
--- a/worklenz-frontend/src/layouts/MainLayout.tsx
+++ b/worklenz-frontend/src/layouts/MainLayout.tsx
@@ -1,60 +1,18 @@
-import { Col, ConfigProvider, Layout } from '@/shared/antd-imports';
-import { Outlet } from 'react-router-dom';
-import { memo, useMemo, useEffect, useRef } from 'react';
-import { useMediaQuery } from 'react-responsive';
+import { ConfigProvider, Layout } from '@/shared/antd-imports';
+import { Outlet, useLocation } from 'react-router-dom';
+import { memo, useMemo } from 'react';

 import Navbar from '../features/navbar/navbar';
 import { useAppSelector } from '../hooks/useAppSelector';
 import { colors } from '../styles/colors';

-import { useRenderPerformance } from '@/utils/performance';
-import { DynamicCSSLoader, LayoutStabilizer } from '@/utils/css-optimizations';
-
 const MainLayout = memo(() => {
  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
-  const layoutRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
  
-  // Performance monitoring in development
-  useRenderPerformance('MainLayout');
+  const isProjectView = location.pathname.includes('/projects/') && 
+                       !location.pathname.endsWith('/projects');

-  // Apply layout optimizations
-  useEffect(() => {
-    if (layoutRef.current) {
-      // Prevent layout shifts in main content area
-      LayoutStabilizer.applyContainment(layoutRef.current, 'layout');
-
-      // Load non-critical CSS dynamically
-      DynamicCSSLoader.loadCSS('/styles/non-critical.css', {
-        priority: 'low',
-        media: 'all',
-      });
-    }
-  }, []);
-
-  // Memoize styles to prevent object recreation on every render
-  const headerStyles = useMemo(
-    () => ({
-      zIndex: 999,
-      position: 'fixed' as const,
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      padding: 0,
-      borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none',
-    }),
-    [themeMode]
-  );
-
-  const contentStyles = useMemo(
-    () => ({
-      paddingInline: isDesktop ? 64 : 24,
-      overflowX: 'hidden' as const,
-    }),
-    [isDesktop]
-  );
-
-  // Memoize theme configuration
  const themeConfig = useMemo(
    () => ({
      components: {
@@ -67,27 +25,19 @@ const MainLayout = memo(() => {
    [themeMode]
  );

-  // Memoize header className
-  const headerClassName = useMemo(
-    () => `shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`,
-    [themeMode]
-  );
-
  return (
    <ConfigProvider theme={themeConfig}>
-      <Layout ref={layoutRef} style={{ minHeight: '100vh' }} className="prevent-layout-shift">
-        <Layout.Header className={`${headerClassName} gpu-accelerated`} style={headerStyles}>
+      <Layout className="min-h-screen">
+        <Layout.Header 
+          className={`sticky top-0 z-[999] flex items-center p-0 shadow-md ${
+            themeMode === 'dark' ? 'border-b border-[#303030]' : 'shadow-[#18181811]'
+          }`}
+        >
          <Navbar />
        </Layout.Header>

-        <Layout.Content className="layout-contained">
-          <Col
-            xxl={{ span: 18, offset: 3, flex: '100%' }}
-            style={contentStyles}
-            className="task-content-container"
-          >
+        <Layout.Content className={`px-4 sm:px-8 lg:px-12 xl:px-16 ${!isProjectView ? 'overflow-x-hidden max-w-[1400px]' : ''} mx-auto w-full`}>
          <Outlet />
-          </Col>
        </Layout.Content>
      </Layout>
    </ConfigProvider>
--- a/worklenz-frontend/src/pages/home/home-page.tsx
+++ b/worklenz-frontend/src/pages/home/home-page.tsx
@@ -103,7 +103,7 @@ const HomePage = memo(() => {
  }, [isDesktop, isOwnerOrAdmin]);

  return (
-    <div className="my-24 min-h-[90vh]">
+    <div className="my-8 min-h-[90vh]">
      <Col className="flex flex-col gap-6">
        <GreetingWithTime />
        {CreateProjectButtonComponent}
@@ -113,13 +113,13 @@ const HomePage = memo(() => {
        <Col xs={24} lg={16}>
          <Flex vertical gap={24}>
            <TasksList />
-
-            <TodoList />
          </Flex>
        </Col>

        <Col xs={24} lg={8}>
          <Flex vertical gap={24}>
+            <TodoList />
+            
            <UserActivityFeed />

            <RecentAndFavouriteProjectList />
--- a/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
+++ b/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
@@ -1,9 +1,10 @@
-import { CheckCircleOutlined, SyncOutlined } from '@/shared/antd-imports';
+import { CheckCircleOutlined, SyncOutlined, DownOutlined, RightOutlined } from '@/shared/antd-imports';
 import { useRef, useState } from 'react';
 import Form from 'antd/es/form';
 import Input, { InputRef } from 'antd/es/input';
 import Flex from 'antd/es/flex';
 import Card from 'antd/es/card';
+import Collapse from 'antd/es/collapse';
 import ConfigProvider from 'antd/es/config-provider';
 import Table, { TableProps } from 'antd/es/table';
 import Tooltip from 'antd/es/tooltip';
@@ -23,6 +24,7 @@ import { useCreatePersonalTaskMutation } from '@/api/home-page/home-page.api.ser

 const TodoList = () => {
  const [isAlertShowing, setIsAlertShowing] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
  const [form] = Form.useForm();
  const { t } = useTranslation('home');

@@ -97,20 +99,52 @@ const TodoList = () => {
  ];

  return (
-    <Card
-      title={
-        <Typography.Title level={5} style={{ marginBlockEnd: 0 }}>
+    <Card style={{ width: '100%' }} bodyStyle={{ padding: 0 }}>
+      <style>{`
+        .todo-collapse .ant-collapse-header {
+          display: flex !important;
+          align-items: center !important;
+          padding: 12px 16px !important;
+        }
+        .todo-collapse .ant-collapse-expand-icon {
+          margin-right: 8px !important;
+          display: flex !important;
+          align-items: center !important;
+        }
+      `}</style>
+      <Collapse
+        defaultActiveKey={[]}
+        ghost
+        size="small"
+        className="todo-collapse"
+        expandIcon={({ isActive }) => 
+          isActive ? <DownOutlined /> : <RightOutlined />
+        }
+        onChange={(keys) => {
+          setIsCollapsed(keys.length === 0);
+        }}
+        items={[
+          {
+            key: '1',
+            label: (
+              <Flex style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+                <Typography.Title level={5} style={{ margin: 0 }}>
                  {t('home:todoList.title')} ({data?.body.length})
                </Typography.Title>
-      }
-      extra={
                <Tooltip title={t('home:todoList.refreshTasks')}>
-          <Button shape="circle" icon={<SyncOutlined spin={isFetching} />} onClick={refetch} />
+                  <Button 
+                    shape="circle" 
+                    icon={<SyncOutlined spin={isFetching} />} 
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      refetch();
+                    }} 
+                  />
                </Tooltip>
-      }
-      style={{ width: '100%' }}
-    >
-      <div>
+              </Flex>
+            ),
+            children: (
+              <div style={{ padding: '0 16px 16px 16px' }}>
                <Form form={form} onFinish={handleTodoSubmit}>
                  <Form.Item name="name">
                    <Flex vertical>
@@ -164,6 +198,10 @@ const TodoList = () => {
                  )}
                </div>
              </div>
+            ),
+          },
+        ]}
+      />
    </Card>
  );
 };
--- a/worklenz-frontend/src/pages/projects/project-list.tsx
+++ b/worklenz-frontend/src/pages/projects/project-list.tsx
@@ -820,7 +820,7 @@ const ProjectList: React.FC = () => {
  }, [loadingProjects, isFetchingProjects, viewMode, groupedProjects.loading, isLoading]);

  return (
-    <div style={{ marginBlock: 65, minHeight: '90vh' }}>
+    <div style={{ minHeight: '90vh' }}>
      <PageHeader
        className="site-page-header"
        title={`${projectCount} ${t('projects')}`}
--- a/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
@@ -369,14 +369,14 @@ const ProjectView = React.memo(() => {
  // Show loading state while project is being fetched or translations are loading
  if (projectLoading || !isInitialized || !translationsReady) {
    return (
-      <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
+      <div style={{ marginBlockEnd: 12, minHeight: '80vh' }}>
        <SuspenseFallback />
      </div>
    );
  }

  return (
-    <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
+    <div style={{ marginBlockEnd: 12, minHeight: '80vh' }}>
      <ProjectViewHeader />

      <Tabs
--- a/worklenz-frontend/src/pages/schedule/schedule.tsx
+++ b/worklenz-frontend/src/pages/schedule/schedule.tsx
@@ -54,7 +54,7 @@ const Schedule: React.FC = () => {
  };

  return (
-    <div style={{ marginBlockStart: 65, minHeight: '90vh' }}>
+    <div style={{ minHeight: '90vh' }}>
      <Flex align="center" justify="space-between">
        <Flex
          gap={16}