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

Long task names in the side menu heading pushed the Test button off the
panel edge instead of truncating. The header row is a grid item whose
default min-width let it grow to the full title width, so the title never
truncated. Add min-w-0 to the header container so it shrinks to the panel
and the title truncates with an ellipsis. The scheduled task page already
did this; this brings the standard and agent task pages in line.
---
 .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 0000000000..64d17de13c
--- /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 560012b34b..b6da63acea 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 816f2fca95..b02a391334 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>