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.
This commit is contained in:
James Ritchie
2026-07-02 18:56:19 +01:00
committed by GitHub
parent 448443a024
commit 478adb5d74
3 changed files with 8 additions and 2 deletions
@@ -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.
@@ -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>
@@ -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>