From 478adb5d74d36f860f6f22d28ee18a299d692f45 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 2 Jul 2026 18:56:19 +0100
Subject: [PATCH] fix(webapp): truncate task title in landing page side menu
 (#4115)

## Summary

Long task names in the task landing page side menu pushed the **Test**
button off the edge of the panel instead of truncating. The heading now
truncates with an ellipsis so the Test button always stays in view, on
the standard and agent task pages.

## Root cause

The side menu lives in a fixed-width resizable panel with `overflow:
hidden`. Its header row is a grid item, and a grid item's default
`min-width: auto` lets it grow to its content's width. The title
`<span>` uses `truncate` (`white-space: nowrap`), whose min-content is
the full, untruncated name, so the header row expanded past the panel
and the Test button was clipped off the edge.

Adding `min-w-0` to the header container lets it shrink back to the
panel width so the title truncates. The scheduled task page already had
this class; the standard and agent pages did not.
---
 .server-changes/task-landing-title-truncate.md              | 6 ++++++
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .server-changes/task-landing-title-truncate.md

diff --git a/.server-changes/task-landing-title-truncate.md b/.server-changes/task-landing-title-truncate.md
new file mode 100644
index 000000000..64d17de13
--- /dev/null
+++ b/.server-changes/task-landing-title-truncate.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Truncate long task names in the task landing page side menu so they no longer push the Test button off the edge.
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
index 560012b34..b6da63ace 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
@@ -431,7 +431,7 @@ function AgentDetailSidebar({
 
   return (
     <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
-      <div className="flex items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
+      <div className="flex min-w-0 items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
         <Header2 className="flex min-w-0 flex-1 items-center gap-1.5">
           <CubeSparkleIcon className="size-4.5 shrink-0 text-agents" />
           <span className="truncate">{agent.slug}</span>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
index 816f2fca9..b02a39133 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
@@ -247,7 +247,7 @@ function TaskDetailSidebar({
 
   return (
     <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
-      <div className="flex items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
+      <div className="flex min-w-0 items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
         <Header2 className="flex min-w-0 flex-1 items-center gap-1.5">
           <TaskIcon className="size-4.5 shrink-0 text-tasks" />
           <span className="truncate">{task.slug}</span>