From 3206af160a2460e19b40d4d3f4d48a9d31f2d5c8 Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Mon, 7 Jul 2025 10:31:33 +0530
Subject: [PATCH] refactor(TaskCard): enhance subtask visibility animation and
 styling

- Updated the TaskCard component to improve the visibility and animation of subtasks, adding a smooth transition effect for better user experience.
- Adjusted the rendering logic to conditionally display the subtasks container based on the task's state, enhancing the overall UI interaction.
---
 .../EnhancedKanbanBoardNativeDnD/TaskCard.tsx       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index 9b1b1c17..b103aeff 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -431,7 +431,16 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                         </div>
                     </div>
                 </div>
-                {task.show_sub_tasks && (
+                <div 
+                    className="subtasks-container"
+                    style={{
+                        overflow: 'hidden',
+                        transition: 'all 0.3s ease-in-out',
+                        maxHeight: task.show_sub_tasks ? '500px' : '0px',
+                        opacity: task.show_sub_tasks ? 1 : 0,
+                        transform: task.show_sub_tasks ? 'translateY(0)' : 'translateY(-10px)',
+                    }}
+                >
                     <div className="mt-2 border-t border-gray-100 dark:border-gray-700 pt-2">
                         {/* Loading state */}
                         {task.sub_tasks_loading && (
@@ -471,7 +480,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                             <div className="py-2 text-xs text-gray-400 dark:text-gray-500">{t('noSubtasks', 'No subtasks')}</div>
                         )}
                     </div>
-                )}
+                </div>
             </div>
         </>
     );