@tuturuuu/ui 0.13.0 → 0.16.0

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/auto-scroll.ts

@@ -1,86 +1,160 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import type {
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+} from '@dnd-kit/core';
+import { useCallback, useEffect, useRef } from 'react';
+
+export const KANBAN_EDGE_AUTO_SCROLL_THRESHOLD = 100;
+const KANBAN_EDGE_AUTO_SCROLL_SPEED = 10;
+const KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED = 30;
+
+type KanbanDragAutoScrollEvent = DragMoveEvent | DragOverEvent | DragStartEvent;
+
+interface HorizontalRect {
+  left: number;
+  right: number;
+}
+
+function getTouchListClientX(touches: unknown) {
+  if (!touches || typeof touches !== 'object') return null;
+
+  const list = touches as ArrayLike<{ clientX?: unknown }> & {
+    item?: (index: number) => { clientX?: unknown } | null;
+  };
+  const touch = list.item?.(0) ?? list[0];
+
+  return typeof touch?.clientX === 'number' ? touch.clientX : null;
+}
+
+function getPointerEventClientX(event: Event) {
+  if ('clientX' in event && typeof event.clientX === 'number') {
+    return event.clientX;
+  }
+
+  if ('touches' in event) {
+    const touchX = getTouchListClientX(event.touches);
+    if (touchX !== null) return touchX;
+  }
+
+  if ('changedTouches' in event) {
+    return getTouchListClientX(event.changedTouches);
+  }
+
+  return null;
+}
+
+function getDragEventDeltaX(event: KanbanDragAutoScrollEvent) {
+  return 'delta' in event && typeof event.delta?.x === 'number'
+    ? event.delta.x
+    : 0;
+}
+
+function getDragActiveCenterX(event: KanbanDragAutoScrollEvent) {
+  const activeRect =
+    event.active.rect.current.translated ?? event.active.rect.current.initial;
+
+  return activeRect ? activeRect.left + activeRect.width / 2 : null;
+}
+
+export function getKanbanDragAutoScrollPointerX(
+  event: KanbanDragAutoScrollEvent
+) {
+  const pointerStartX = getPointerEventClientX(event.activatorEvent);
+
+  if (pointerStartX !== null) {
+    return pointerStartX + getDragEventDeltaX(event);
+  }
+
+  return getDragActiveCenterX(event);
+}
+
+export function getKanbanEdgeAutoScrollAmount(
+  pointerX: number | null,
+  rect: HorizontalRect,
+  options: {
+    maxSpeed?: number;
+    speed?: number;
+    threshold?: number;
+  } = {}
+) {
+  if (pointerX === null) return 0;
+
+  const threshold = options.threshold ?? KANBAN_EDGE_AUTO_SCROLL_THRESHOLD;
+  const speed = options.speed ?? KANBAN_EDGE_AUTO_SCROLL_SPEED;
+  const maxSpeed = options.maxSpeed ?? KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED;
+
+  if (pointerX <= rect.left + threshold) {
+    const distanceFromLeft = Math.max(0, pointerX - rect.left);
+    const intensity = 1 - distanceFromLeft / threshold;
+    return -Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
+  }
+
+  if (pointerX >= rect.right - threshold) {
+    const distanceFromRight = Math.max(0, rect.right - pointerX);
+    const intensity = 1 - distanceFromRight / threshold;
+    return Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
+  }
+
+  return 0;
+}
 
 export function useAutoScroll(
-  isDraggingRef: React.MutableRefObject<boolean>,
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 ) {
   const autoScrollRafRef = useRef<number | null>(null);
+  const isAutoScrollActiveRef = useRef(false);
+  const pointerXRef = useRef<number | null>(null);
 
-  useEffect(() => {
-    const EDGE_THRESHOLD = 100; // Distance from edge to trigger scroll (px)
-    const SCROLL_SPEED = 10; // Base scroll speed (px per frame)
-    const MAX_SCROLL_SPEED = 30; // Maximum scroll speed (px per frame)
+  const stopAutoScroll = useCallback(() => {
+    isAutoScrollActiveRef.current = false;
+    pointerXRef.current = null;
 
-    let currentPointerX = 0;
+    if (autoScrollRafRef.current !== null) {
+      cancelAnimationFrame(autoScrollRafRef.current);
+      autoScrollRafRef.current = null;
+    }
+  }, []);
+
+  const autoScroll = useCallback(() => {
+    if (!isAutoScrollActiveRef.current || !scrollContainerRef.current) {
+      autoScrollRafRef.current = null;
+      return;
+    }
+
+    const container = scrollContainerRef.current;
+    const scrollAmount = getKanbanEdgeAutoScrollAmount(
+      pointerXRef.current,
+      container.getBoundingClientRect()
+    );
 
-    function handlePointerMove(event: PointerEvent) {
-      currentPointerX = event.clientX;
+    if (scrollAmount !== 0) {
+      container.scrollLeft += scrollAmount;
     }
 
-    function autoScroll() {
-      if (!isDraggingRef.current || !scrollContainerRef.current) {
-        autoScrollRafRef.current = null;
-        return;
-      }
-
-      const container = scrollContainerRef.current;
-      const rect = container.getBoundingClientRect();
-
-      // Calculate distance from edges
-      const distanceFromLeft = currentPointerX - rect.left;
-      const distanceFromRight = rect.right - currentPointerX;
-
-      let scrollAmount = 0;
-
-      // Scroll left when near left edge
-      if (distanceFromLeft < EDGE_THRESHOLD && distanceFromLeft > 0) {
-        const intensity = 1 - distanceFromLeft / EDGE_THRESHOLD;
-        scrollAmount = -Math.min(
-          SCROLL_SPEED + intensity * (MAX_SCROLL_SPEED - SCROLL_SPEED),
-          MAX_SCROLL_SPEED
-        );
-      }
-      // Scroll right when near right edge
-      else if (distanceFromRight < EDGE_THRESHOLD && distanceFromRight > 0) {
-        const intensity = 1 - distanceFromRight / EDGE_THRESHOLD;
-        scrollAmount = Math.min(
-          SCROLL_SPEED + intensity * (MAX_SCROLL_SPEED - SCROLL_SPEED),
-          MAX_SCROLL_SPEED
-        );
-      }
-
-      // Apply scroll if needed
-      if (scrollAmount !== 0) {
-        container.scrollLeft += scrollAmount;
-      }
-
-      // Continue the animation loop
+    autoScrollRafRef.current = requestAnimationFrame(autoScroll);
+  }, [scrollContainerRef]);
+
+  const startAutoScroll = useCallback(() => {
+    isAutoScrollActiveRef.current = true;
+
+    if (autoScrollRafRef.current === null) {
       autoScrollRafRef.current = requestAnimationFrame(autoScroll);
     }
+  }, [autoScroll]);
+
+  const updateAutoScrollPointerX = useCallback((pointerX: number | null) => {
+    pointerXRef.current = pointerX;
+  }, []);
+
+  useEffect(() => stopAutoScroll, [stopAutoScroll]);
 
-    // Start auto-scroll loop when dragging starts (triggered by isDraggingRef)
-    window.addEventListener('pointermove', handlePointerMove);
-
-    // Watch for drag start to initialize auto-scroll loop
-    const startAutoScrollLoop = () => {
-      if (isDraggingRef.current && !autoScrollRafRef.current) {
-        autoScrollRafRef.current = requestAnimationFrame(autoScroll);
-      }
-    };
-
-    // Poll for drag start (alternative: trigger from onDragStart)
-    const pollInterval = setInterval(startAutoScrollLoop, 100);
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-      clearInterval(pollInterval);
-      if (autoScrollRafRef.current) {
-        cancelAnimationFrame(autoScrollRafRef.current);
-      }
-    };
-  }, [isDraggingRef, scrollContainerRef]);
-
-  return { autoScrollRafRef };
+  return {
+    autoScrollRafRef,
+    startAutoScroll,
+    stopAutoScroll,
+    updateAutoScrollPointerX,
+  };
 }

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/use-kanban-dnd.test.ts

@@ -20,6 +20,7 @@ vi.mock('@tuturuuu/utils/task-helper', () => {
 
 import {
   applyTaskDropPreviewToCache,
+  getPersonalPlacementTargetBoardId,
   getProjectedTaskDropOrderFromPreview,
   getTaskDropEndPreviewFromRects,
   getTaskDropPositionFromRects,
@@ -178,6 +179,53 @@ describe('usesPersonalPlacement', () => {
   });
 });
 
+describe('getPersonalPlacementTargetBoardId', () => {
+  it('uses the target list board id for real-list moves', () => {
+    expect(
+      getPersonalPlacementTargetBoardId({
+        boardId: 'fallback-board',
+        columns: [
+          createList({
+            board_id: 'canonical-board',
+            id: 'target-list',
+          } as Partial<TaskList>),
+        ],
+        targetListId: 'target-list',
+      })
+    ).toBe('canonical-board');
+  });
+
+  it('keeps staging board ids from virtual staging lanes', () => {
+    expect(
+      getPersonalPlacementTargetBoardId({
+        boardId: 'fallback-board',
+        columns: [
+          createList({
+            board_id: 'canonical-board',
+            id: 'target-list',
+          } as Partial<TaskList>),
+        ],
+        targetListId: 'personal-external-staging:staging-board',
+      })
+    ).toBe('staging-board');
+  });
+
+  it('falls back to the current board id when list metadata is absent', () => {
+    expect(
+      getPersonalPlacementTargetBoardId({
+        boardId: 'fallback-board',
+        columns: [
+          createList({
+            board_id: 'other-board',
+            id: 'other-list',
+          } as Partial<TaskList>),
+        ],
+        targetListId: 'target-list',
+      })
+    ).toBe('fallback-board');
+  });
+});
+
 describe('mergeTaskIntoBoardTaskCache', () => {
   it('updates an existing task in the board cache', () => {
     const existingTask = createTask({ list_id: 'source-list' });

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/use-kanban-dnd.ts

@@ -25,7 +25,7 @@ import { isPersonalExternalOverlayTask } from '../../../../../../../lib/task-per
 import { useBoardBroadcast } from '../../../../shared/board-broadcast-context';
 import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
-import { useAutoScroll } from './auto-scroll';
+import { getKanbanDragAutoScrollPointerX, useAutoScroll } from './auto-scroll';
 import { getColumnReorderUpdates } from './column-reorder';
 import { calculateSortKeyWithRetry as createCalculateSortKeyWithRetry } from './kanban-sort-helpers';
 import {
@@ -126,6 +126,23 @@ export function usesPersonalPlacement(task: Task) {
   return isPersonalExternalOverlayTask(task);
 }
 
+export function getPersonalPlacementTargetBoardId({
+  boardId,
+  columns,
+  targetListId,
+}: {
+  boardId: string | null;
+  columns: Pick<TaskList, 'board_id' | 'id'>[];
+  targetListId: string;
+}) {
+  const stagingBoardId = getPersonalExternalStagingBoardId(targetListId);
+  if (stagingBoardId) return stagingBoardId;
+
+  return (
+    columns.find((column) => column.id === targetListId)?.board_id ?? boardId
+  );
+}
+
 function getTaskDropPosition(
   event: DragMoveEvent | DragEndEvent,
   pointerY?: number | null,
@@ -442,8 +459,20 @@ export function useKanbanDnd({
       }
 
       const stagingBoardId = getPersonalExternalStagingBoardId(targetListId);
-      const targetBoardId = stagingBoardId ?? boardId;
+      const targetBoardId = getPersonalPlacementTargetBoardId({
+        boardId,
+        columns,
+        targetListId,
+      });
+      if (!targetBoardId) {
+        throw new Error('Board ID is required');
+      }
       const isStagingTarget = stagingBoardId !== null;
+      const targetList = columns.find((column) => column.id === targetListId);
+      const terminalStatus =
+        targetList?.status === 'done' || targetList?.status === 'closed'
+          ? targetList.status
+          : undefined;
       const nextTask = {
         ...task,
         list_id: isStagingTarget
@@ -483,6 +512,7 @@ export function useKanbanDnd({
               personal_sort_key: newSortKey,
               previous_task_id: order?.previousTaskId ?? null,
               next_task_id: order?.nextTaskId ?? null,
+              terminal_status: terminalStatus,
             });
 
         if (isStagingTarget) {
@@ -540,7 +570,7 @@ export function useKanbanDnd({
         throw error;
       }
     },
-    [boardId, queryClient]
+    [boardId, columns, queryClient]
   );
 
   // Use the extracted calculateSortKeyWithRetry helper
@@ -566,8 +596,15 @@ export function useKanbanDnd({
     [wsId]
   );
 
-  // Initialize auto-scroll
-  useAutoScroll(isDraggingRef, scrollContainerRef);
+  const { startAutoScroll, stopAutoScroll, updateAutoScrollPointerX } =
+    useAutoScroll(scrollContainerRef);
+
+  const updateAutoScrollFromDragEvent = useCallback(
+    (event: DragMoveEvent | DragOverEvent | DragStartEvent) => {
+      updateAutoScrollPointerX(getKanbanDragAutoScrollPointerX(event));
+    },
+    [updateAutoScrollPointerX]
+  );
 
   const resetDragState = useCallback(
     (clearOptimisticUpdates = false) => {
@@ -582,12 +619,13 @@ export function useKanbanDnd({
       dragSessionMetricsRef.current = null;
       dragStartTaskIndexesByListRef.current.clear();
       isDraggingRef.current = false;
+      stopAutoScroll();
 
       if (clearOptimisticUpdates) {
         setOptimisticUpdateInProgress(new Set());
       }
     },
-    [setDragPreviewPosition]
+    [setDragPreviewPosition, stopAutoScroll]
   );
 
   const markTaskIdsPending = useCallback((taskIds: string[]) => {
@@ -606,6 +644,8 @@ export function useKanbanDnd({
 
   const processTaskDragPreview = useCallback(
     (event: DragMoveEvent) => {
+      updateAutoScrollFromDragEvent(event);
+
       const { active, over } = event;
       const activeType = active.data?.current?.type;
       if (!activeType) return;
@@ -730,6 +770,7 @@ export function useKanbanDnd({
       getDragPreviewForList,
       getDragPreviewForListSurface,
       setDragPreviewPosition,
+      updateAutoScrollFromDragEvent,
       wsId,
     ]
   );
@@ -742,6 +783,8 @@ export function useKanbanDnd({
 
     // Enable auto-scroll
     isDraggingRef.current = true;
+    updateAutoScrollFromDragEvent(event);
+    startAutoScroll();
 
     const { type } = active.data.current;
     if (type === 'Column') {
@@ -750,6 +793,7 @@ export function useKanbanDnd({
     }
     if (type === 'Task') {
       if (!wsId) {
+        resetDragState(true);
         return;
       }
 

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-columns.tsx

@@ -79,6 +79,7 @@ interface KanbanColumnsProps {
     pin: SpecialTaskListPin,
     pinned: boolean
   ) => void;
+  onHoveredTaskListChange?: (listId: string | null) => void;
   readOnly?: boolean;
 }
 
@@ -156,6 +157,7 @@ export function KanbanColumns({
   onDeadlineSectionCollapsedChange,
   specialTaskListPins,
   onSpecialTaskListPinnedChange,
+  onHoveredTaskListChange,
   readOnly = false,
 }: KanbanColumnsProps) {
   const initialScrollAnchoredBoardRef = useRef<string | null>(null);
@@ -270,6 +272,7 @@ export function KanbanColumns({
   return (
     <div
       ref={boardRef}
+      onPointerLeave={() => onHoveredTaskListChange?.(null)}
       className="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent relative flex h-full w-full snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain scroll-smooth"
       style={
         {
@@ -416,6 +419,9 @@ export function KanbanColumns({
                     onSpecialTaskListPinnedChange?.('closed_tasks', pinned);
                   }
                 }}
+                onHoverTaskList={
+                  list.is_external_staging ? undefined : onHoveredTaskListChange
+                }
                 readOnly={readOnly}
               />
             );

package/src/components/ui/tu-do/boards/boardId/kanban.tsx

@@ -104,6 +104,7 @@ interface Props {
   onBulkSelectionActiveChange?: (active: boolean) => void;
   canUseBoardAssignees?: boolean;
   assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
+  onHoveredTaskListChange?: (listId: string | null) => void;
   readOnly?: boolean;
 }
 
@@ -129,6 +130,7 @@ export function KanbanBoard({
   onBulkSelectionActiveChange,
   canUseBoardAssignees,
   assigneeMemberSource,
+  onHoveredTaskListChange,
   readOnly = false,
 }: Props) {
   const tCommon = useTranslations('common');
@@ -150,7 +152,6 @@ export function KanbanBoard({
   const [assigneeSearchQuery, setAssigneeSearchQuery] = useState('');
 
   // Refs
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const taskHeightsRef = useRef<Map<string, number>>(new Map());
   const boardRef = useRef<HTMLDivElement>(null);
 
@@ -412,7 +413,7 @@ export function KanbanBoard({
     ),
     reorderTaskMutation,
     taskHeightsRef,
-    scrollContainerRef,
+    scrollContainerRef: boardRef,
   });
 
   const sensors = useSensors(
@@ -565,6 +566,7 @@ export function KanbanBoard({
             onTaskListCollapsedChange={onTaskListCollapsedChange}
             specialTaskListPins={specialTaskListPins}
             onSpecialTaskListPinnedChange={onSpecialTaskListPinnedChange}
+            onHoveredTaskListChange={onHoveredTaskListChange}
             readOnly={readOnly}
           />
 

package/src/components/ui/tu-do/boards/boardId/menus/__tests__/task-menus.test.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const taskSchedulingApiMock = vi.hoisted(() => ({
   getCurrentUserTaskSchedule: vi.fn(),
@@ -67,8 +67,8 @@ vi.mock('@tuturuuu/ui/dropdown-menu', () => ({
   DropdownMenuSub: ({ children }: any) => (
     <div data-testid="dropdown-sub">{children}</div>
   ),
-  DropdownMenuSubTrigger: ({ children }: any) => (
-    <button type="button" data-testid="dropdown-trigger">
+  DropdownMenuSubTrigger: ({ children, className }: any) => (
+    <button type="button" className={className} data-testid="dropdown-trigger">
       {children}
     </button>
   ),
@@ -151,6 +151,10 @@ describe('TaskDueDateMenu', () => {
   const mockOnMenuItemSelect = vi.fn((_, action) => action());
   const mockOnClose = vi.fn();
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should render due date menu', () => {
     render(
       <TaskDueDateMenu
@@ -200,6 +204,40 @@ describe('TaskDueDateMenu', () => {
 
     expect(screen.getByText('Remove Due Date')).toBeInTheDocument();
   });
+
+  it('should render compact due date summaries without wrapping the trigger label', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-01-15T12:00:00.000Z'));
+
+    render(
+      <TaskDueDateMenu
+        endDate="2026-03-16T12:00:00.000Z"
+        isLoading={false}
+        onDueDateChange={mockOnDueDateChange}
+        onCustomDateClick={mockOnCustomDateClick}
+        onMenuItemSelect={mockOnMenuItemSelect}
+        onClose={mockOnClose}
+      />
+    );
+
+    const triggerLabel = screen.getByText('Due Date');
+    const compactDate = screen.getByText('in 2mo');
+
+    expect(screen.getByTestId('dropdown-trigger')).toHaveClass('min-w-0');
+    expect(triggerLabel).toHaveClass(
+      'min-w-0',
+      'flex-1',
+      'truncate',
+      'whitespace-nowrap'
+    );
+    expect(compactDate).toHaveClass(
+      'shrink-0',
+      'truncate',
+      'whitespace-nowrap',
+      'text-right'
+    );
+    expect(screen.queryByText('in about 2 months')).not.toBeInTheDocument();
+  });
 });
 
 describe('task scheduling utilities', () => {

package/src/components/ui/tu-do/boards/boardId/menus/task-due-date-menu.tsx

@@ -7,9 +7,10 @@ import {
   DropdownMenuSubTrigger,
 } from '@tuturuuu/ui/dropdown-menu';
 import {
-  formatDistanceToNow,
+  differenceInCalendarDays,
   isToday,
   isTomorrow,
+  isValid,
   isYesterday,
 } from 'date-fns';
 import { calculateDaysUntilEndOfWeek } from '../../../utils/weekDateUtils';
@@ -55,6 +56,22 @@ const calculateDaysForPreset = (
   }
 };
 
+const formatCompactRelativeDate = (date: Date, now = new Date()) => {
+  const days = differenceInCalendarDays(date, now);
+  const absoluteDays = Math.abs(days);
+
+  const [value, unit] =
+    absoluteDays < 7
+      ? [absoluteDays, 'd']
+      : absoluteDays < 30
+        ? [Math.max(1, Math.round(absoluteDays / 7)), 'wk']
+        : absoluteDays < 365
+          ? [Math.max(1, Math.round(absoluteDays / 30)), 'mo']
+          : [Math.max(1, Math.round(absoluteDays / 365)), 'y'];
+
+  return days > 0 ? `in ${value}${unit}` : `${value}${unit} ago`;
+};
+
 export function TaskDueDateMenu({
   endDate,
   isLoading,
@@ -82,7 +99,7 @@ export function TaskDueDateMenu({
     if (isToday(date)) return t.today;
     if (isTomorrow(date)) return t.tomorrow;
     if (isYesterday(date)) return t.yesterday;
-    return formatDistanceToNow(date, { addSuffix: true });
+    return formatCompactRelativeDate(date);
   };
 
   const dueDateOptionsTranslated = [
@@ -104,19 +121,23 @@ export function TaskDueDateMenu({
     },
   ];
 
-  const currentDateDisplay = endDate
-    ? formatSmartDateTranslated(new Date(endDate))
-    : t.none;
+  const parsedEndDate = endDate ? new Date(endDate) : null;
+  const currentDateDisplay =
+    parsedEndDate && isValid(parsedEndDate)
+      ? formatSmartDateTranslated(parsedEndDate)
+      : t.none;
 
   return (
     <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <div className="h-4 w-4">
+      <DropdownMenuSubTrigger className="min-w-0">
+        <div className="h-4 w-4 shrink-0">
           <Calendar className="h-4 w-4 text-dynamic-purple" />
         </div>
-        <div className="flex w-full items-center justify-between">
-          <span>{t.dueDate}</span>
-          <span className="ml-auto text-muted-foreground text-xs">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate whitespace-nowrap">
+            {t.dueDate}
+          </span>
+          <span className="max-w-20 shrink-0 truncate whitespace-nowrap text-right text-muted-foreground text-xs">
             {currentDateDisplay}
           </span>
         </div>

package/src/components/ui/tu-do/boards/boardId/menus/task-priority-menu.tsx

@@ -104,13 +104,15 @@ export function TaskPriorityMenu({
 
   return (
     <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <div className="h-4 w-4">
+      <DropdownMenuSubTrigger className="min-w-0">
+        <div className="h-4 w-4 shrink-0">
           <Flag className="h-4 w-4 text-dynamic-orange" />
         </div>
-        <div className="flex w-full items-center justify-between">
-          <span>{t.priority}</span>
-          <span className="ml-auto text-muted-foreground text-xs">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate whitespace-nowrap">
+            {t.priority}
+          </span>
+          <span className="max-w-20 shrink-0 truncate whitespace-nowrap text-right text-muted-foreground text-xs">
             {currentPriority
               ? priorityLabelTranslated[currentPriority]
               : t.none}

package/src/components/ui/tu-do/boards/boardId/menus/task-scheduling-menu.tsx

@@ -296,12 +296,14 @@ export function TaskSchedulingMenu({
 
   return (
     <DropdownMenuSub open={open} onOpenChange={setOpen}>
-      <DropdownMenuSubTrigger>
-        <CalendarClock className="h-4 w-4 text-dynamic-amber" />
-        <div className="flex w-full items-center justify-between gap-2">
-          <span>{t.schedule}</span>
+      <DropdownMenuSubTrigger className="min-w-0">
+        <CalendarClock className="h-4 w-4 shrink-0 text-dynamic-amber" />
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate whitespace-nowrap">
+            {t.schedule}
+          </span>
           {formattedDuration && (
-            <span className="ml-auto text-muted-foreground text-xs">
+            <span className="max-w-20 shrink-0 truncate whitespace-nowrap text-right text-muted-foreground text-xs">
               {formattedDuration}
             </span>
           )}