#4020 only track max height

Author: chpy04

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskColumn.tsx

@@ -20,15 +20,15 @@ export const TaskColumn = ({
   onAddTask,
   onHeightChange
 }: {
-  status: Task['status'];
+  status: TaskStatus;
   tasks: TaskWithIndex[];
   project: Project;
   equalizedHeight: number;
   isDragging: boolean;
   onEditTask: (task: Task) => void;
   onDeleteTask: (taskId: string) => void;
   onAddTask: (task: Task) => void;
-  onHeightChange: (status: Task['status'], height: number) => void;
+  onHeightChange: (height: number) => void;
 }) => {
   const { mutateAsync: createTask } = useCreateTask();
   const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
@@ -100,7 +100,7 @@ export const TaskColumn = ({
                 if (!droppableBox) return;
 
                 const observer = new ResizeObserver(() => {
-                  onHeightChange(status, droppableBox.scrollHeight);
+                  onHeightChange(droppableBox.scrollHeight);
                 });
                 observer.observe(droppableBox);
                 return () => observer.disconnect();

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskListContent.tsx

@@ -20,11 +20,10 @@ export const TaskListContent = ({ project }: TaskListProps) => {
   const toast = useToast();
 
   const [isDragging, setIsDragging] = useState(false);
-  const [columnHeights, setColumnHeights] = useState<Partial<Record<Task['status'], number>>>({});
-  const equalizedHeight = Math.max(...(Object.values(columnHeights) as number[]));
+  const [maxColHeight, setMaxColumnHeight] = useState(0);
 
-  const onHeightChange = useCallback((status: Task['status'], height: number) => {
-    setColumnHeights((prev) => ({ ...prev, [status]: height }));
+  const onHeightChange = useCallback((height: number) => {
+    setMaxColumnHeight((prev) => Math.max(height, prev));
   }, []);
 
   const onDeleteTask = (taskId: string) => {
@@ -135,7 +134,7 @@ export const TaskListContent = ({ project }: TaskListProps) => {
             tasks={tasksByStatus[status]}
             key={status}
             project={project}
-            equalizedHeight={equalizedHeight}
+            equalizedHeight={maxColHeight}
             isDragging={isDragging}
           />
         ))}