From 26144aa1d6717a01b1f509253b98ba12bcd03af4 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 11 Jul 2026 22:12:20 +0800
Subject: [PATCH] fix(web): truncate long task IDs so they stay inside their
 column

The task-log and MJ task ID cells used a w-max wrapper, so long IDs
(and the platform/action subtitle) overflowed the column and rendered
under the adjacent Cost column. Constrain the cell to the column width
and let the badge label ellipsize; the copy button still copies the
full ID.
---
 .../usage-logs/components/columns/drawing-logs-columns.tsx | 4 ++--
 .../usage-logs/components/columns/task-logs-columns.tsx    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
index b84fb2e05d..6a484dd496 100644
--- a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
@@ -153,12 +153,12 @@ export function useDrawingLogsColumns(
       }
 
       return (
-        <div className='flex w-max flex-col gap-0.5'>
+        <div className='flex min-w-0 flex-col items-start gap-0.5'>
           <CopyableStatusBadge
             value={mjId}
             variant='neutral'
             size='sm'
-            className='font-mono'
+            className='max-w-full min-w-0 shrink overflow-hidden font-mono [&>[data-slot=status-badge-label]]:min-w-0 [&>[data-slot=status-badge-label]]:max-w-full [&>[data-slot=status-badge-label]]:shrink [&>[data-slot=status-badge-label]]:overflow-hidden [&>[data-slot=status-badge-label]]:text-ellipsis'
           >
             {mjId}
           </CopyableStatusBadge>
diff --git a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
index e0d1d7ef77..624b161cc9 100644
--- a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
@@ -135,22 +135,23 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
           return <span className='text-subtle-foreground text-xs'>-</span>
         }
         return (
-          <div className='flex w-max flex-col gap-0.5'>
+          <div className='flex min-w-0 flex-col items-start gap-0.5'>
             <CopyableStatusBadge
               value={taskId}
               variant='neutral'
               size='sm'
-              className='font-mono'
+              className='max-w-full min-w-0 shrink overflow-hidden font-mono [&>[data-slot=status-badge-label]]:min-w-0 [&>[data-slot=status-badge-label]]:max-w-full [&>[data-slot=status-badge-label]]:shrink [&>[data-slot=status-badge-label]]:overflow-hidden [&>[data-slot=status-badge-label]]:text-ellipsis'
             >
               {taskId}
             </CopyableStatusBadge>
-            <span className='text-subtle-foreground max-w-[200px] truncate text-xs'>
+            <span className='text-subtle-foreground max-w-full truncate text-xs'>
               {getTaskPlatformName(log.platform)} ·{' '}
               {t(taskActionMapper.getLabel(log.action))}
             </span>
           </div>
         )
       },
+      size: 260,
       meta: {
         cardRole: 'title',
         cardSpan: 2,