From d9a5f76449f24879026341210f11d5a1b4de549f Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Fri, 11 Jul 2025 11:17:40 +0530
Subject: [PATCH] feat(assignee-selector): add kanbanMode prop and enhance
 styling

- Introduced kanbanMode prop to AssigneeSelector for improved functionality in kanban view.
- Updated styling in AssigneeSelector to adjust z-index for better overlay management.
- Enhanced TaskCard to include LazyAssigneeSelectorWrapper, integrating the new prop for task assignment in kanban mode.
---
 .../src/components/AssigneeSelector.tsx       |  6 ++++--
 .../EnhancedKanbanBoardNativeDnD/TaskCard.tsx | 21 +++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/worklenz-frontend/src/components/AssigneeSelector.tsx b/worklenz-frontend/src/components/AssigneeSelector.tsx
index 91866b7d..f9d8fd1f 100644
--- a/worklenz-frontend/src/components/AssigneeSelector.tsx
+++ b/worklenz-frontend/src/components/AssigneeSelector.tsx
@@ -18,12 +18,14 @@ interface AssigneeSelectorProps {
   task: IProjectTask;
   groupId?: string | null;
   isDarkMode?: boolean;
+  kanbanMode?: boolean;
 }
 
 const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({ 
   task, 
   groupId = null, 
-  isDarkMode = false 
+  isDarkMode = false,
+  kanbanMode = false
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -233,7 +235,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           ref={dropdownRef}
           onClick={e => e.stopPropagation()}
           className={`
-            fixed z-9999 w-72 rounded-md shadow-lg border
+            fixed z-[99999] w-72 rounded-md shadow-lg border
             ${isDarkMode 
               ? 'bg-gray-800 border-gray-600' 
               : 'bg-white border-gray-200'
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index fea952f0..fb03fb0b 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -424,7 +424,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                         </div>
                     </div>
                 </div>
-                <div 
+                <div
                     className="subtasks-container"
                     style={{
                         overflow: 'hidden',
@@ -456,14 +456,17 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                                         >
                                             {sub.end_date ? format(new Date(sub.end_date), 'MMM d, yyyy') : ''}
                                         </span>
-                                        {sub.names && sub.names.length > 0 && (
-                                            <AvatarGroup
-                                                members={sub.names}
-                                                maxCount={2}
-                                                isDarkMode={themeMode === 'dark'}
-                                                size={18}
-                                            />
-                                        )}
+                                        <span className="flex items-center">
+                                            {sub.names && sub.names.length > 0 && (
+                                                <AvatarGroup
+                                                    members={sub.names}
+                                                    maxCount={2}
+                                                    isDarkMode={themeMode === 'dark'}
+                                                    size={18}
+                                                />
+                                            )}
+                                            <LazyAssigneeSelectorWrapper task={sub} groupId={groupId} isDarkMode={themeMode === 'dark'} kanbanMode={true} />
+                                        </span>
                                     </li>
                                 ))}
                             </ul>