Skip to content

Commit 478adb5

Browse files
authored
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.
1 parent 448443a commit 478adb5

3 files changed

Lines changed: 8 additions & 2 deletions

File tree

  • .server-changes
  • apps/webapp/app/routes
    • _app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam
    • _app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
area: webapp
3+
type: fix
4+
---
5+
6+
Truncate long task names in the task landing page side menu so they no longer push the Test button off the edge.

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ function AgentDetailSidebar({
431431

432432
return (
433433
<div className="grid h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
434-
<div className="flex items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
434+
<div className="flex min-w-0 items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
435435
<Header2 className="flex min-w-0 flex-1 items-center gap-1.5">
436436
<CubeSparkleIcon className="size-4.5 shrink-0 text-agents" />
437437
<span className="truncate">{agent.slug}</span>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ function TaskDetailSidebar({
247247

248248
return (
249249
<div className="grid h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
250-
<div className="flex items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
250+
<div className="flex min-w-0 items-center gap-2 border-b border-grid-dimmed py-2 pl-3 pr-2">
251251
<Header2 className="flex min-w-0 flex-1 items-center gap-1.5">
252252
<TaskIcon className="size-4.5 shrink-0 text-tasks" />
253253
<span className="truncate">{task.slug}</span>

0 commit comments

Comments
 (0)