From 0d9dd5628f7821fabd5516a0238e0ed33c8dd9d7 Mon Sep 17 00:00:00 2001
From: Omar Zeineddine <oz@amalinvest.com>
Date: Wed, 24 Jun 2026 20:39:38 +0300
Subject: [PATCH] fix(core): show full job name & id on queue list via tooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The queue list hard-truncated job ids to 24 chars with no way to see
the full value — custom ids like "order_8353…" were unreadable. Drop
the JS truncation (CSS already ellipsizes to fit the column) and wrap
the name/id block in a tooltip that reveals the complete job name and
full id on hover.
---
 packages/core/src/ui/pages/queue.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/ui/pages/queue.tsx b/packages/core/src/ui/pages/queue.tsx
index aa165c9..c197eb0 100644
--- a/packages/core/src/ui/pages/queue.tsx
+++ b/packages/core/src/ui/pages/queue.tsx
@@ -39,6 +39,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { JobInfo, JobStatus } from "@/core/types";
 import {
   useBulkDelete,
@@ -51,7 +56,6 @@ import {
   useRefresh,
   useResumeQueue,
 } from "@/lib/hooks";
-import { truncate } from "@/lib/utils";
 import type { QueueSearch } from "@/router";
 
 interface QueuePageProps {
@@ -523,12 +527,22 @@ function JobRow({ job, selected, onSelect, onClick }: JobRowProps) {
           <Checkbox checked={selected} />
         </div>
         <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
-        <div className="min-w-0">
-          <div className="truncate font-medium">{job.name}</div>
-          <div className="truncate font-mono text-xs text-muted-foreground">
-            {truncate(job.id, 24)}
-          </div>
-        </div>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="min-w-0">
+              <div className="truncate font-medium">{job.name}</div>
+              <div className="truncate font-mono text-xs text-muted-foreground">
+                {job.id}
+              </div>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent align="start" className="max-w-[28rem]">
+            <div className="font-medium">{job.name}</div>
+            <div className="break-all font-mono text-muted-foreground">
+              {job.id}
+            </div>
+          </TooltipContent>
+        </Tooltip>
       </div>
       <div className="col-span-2">
         <StatusBadge status={job.status} duration={job.duration} />