diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx index 4b6d209e..943c9ad3 100644 --- a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx +++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx @@ -1317,24 +1317,65 @@ const TaskListV2: React.FC = () => { onDragOver={handleDragOver} onDragEnd={handleDragEnd} > -
+
{/* Task Filters */} -
+
- {/* Table Container with synchronized horizontal scrolling */} -
-
- {/* Column Headers - Fixed at top */} -
-
- {columnHeaders} + {/* Table Container with fixed height and horizontal scroll */} +
+
+ {/* Column Headers - Sticky at top */} +
+
+ {visibleColumns.map(column => { + const columnStyle: ColumnStyle = { + width: column.width, + flexShrink: 0, + ...(column.id === 'labels' && column.width === 'auto' + ? { + minWidth: '200px', + flexGrow: 1, + } + : {}), + }; + + return ( +
+ {column.id === 'dragHandle' ? ( + + ) : column.id === 'checkbox' ? ( + + ) : (column as any).isCustom ? ( + + ) : ( + t(column.label || '') + )} +
+ ); + })} +
+ +
- {/* Task List - Scrollable content */} -
+ {/* Task List Content */} +
!('isAddTaskRow' in item) && !item.parent_task_id) @@ -1343,7 +1384,7 @@ const TaskListV2: React.FC = () => { strategy={verticalListSortingStrategy} > { ) : null} - {/* Bulk Action Bar */} + {/* Bulk Action Bar - Positioned absolutely to not affect layout */} {selectedTaskIds.length > 0 && urlProjectId && ( - +
+ +
)} {/* Custom Column Modal */}