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:
@@ -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.
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user