Bug
In the Skill Builder ("Skills attached to this agent" list), a skill whose name + description are long pushes the Edit button off the right edge of the left panel, where it's clipped and unreachable.

Repro: open the Skill Builder for an agent with a custom skill that has a long one-line description (e.g. k8s-incident-triage — "Read-only Kubernetes incident triage using kubectl. Accepts natural language or structured input. Produces root-cause hypotheses…"). The description runs past the panel edge and the row's Edit button is not visible.
Root cause
The row markup + CSS are already set up to truncate the description and keep the button visible:
forge-ui/static/app.js:2849 — .sb-custom-skill-row = .sb-custom-skill-info (name + desc) followed by the Edit button.
forge-ui/static/style.css:2183 — .sb-custom-skill-info { flex: 1; min-width: 0 } and .sb-custom-skill-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }.
So the row-level truncation is correct. The failure is an ancestor min-width blowout:
.skill-builder is display: grid; grid-template-columns: 55% 45% (style.css:1775).
.skill-builder-left is a grid item with overflow: hidden (style.css:1783) but no min-width: 0. Grid (and flex) items default to min-width: auto, which lets their content force the track wider than the 55% template — so the long description expands the left panel, and because the panel is overflow: hidden, the Edit button sitting at the end of the row is clipped instead of scrolled into view (i.e. invisible, not reachable).
- Separately,
.sb-custom-skill-row .btn (the Edit button) has no flex-shrink: 0, so it can also be the element that gets squeezed.
Suggested fix
- Add
min-width: 0 to .skill-builder-left (and any intermediate flex/grid containers between it and .sb-custom-skill-row) so the track honors the 55% width and the row's existing ellipsis truncation actually engages.
- Add
flex-shrink: 0 to the Edit button in .sb-custom-skill-row .btn so it's never the element that shrinks/clips.
- Optional polish: let the description wrap to two lines with a line clamp instead of a single-line ellipsis, so more of it is readable within the panel width.
Acceptance
With a skill whose name + description are long, the Edit button stays fully visible at the right of its row, and the description truncates within the panel width. Verify at both the 55%/45% desktop layout and the stacked mobile layout (style.css:2131).
Context
forge-ui/static/app.js:2849-2863 (the custom-skill row + Edit button)
forge-ui/static/style.css:2183-2208 (row / info / desc), :1775-1796 (skill-builder grid + left/right panels)
Bug
In the Skill Builder ("Skills attached to this agent" list), a skill whose name + description are long pushes the Edit button off the right edge of the left panel, where it's clipped and unreachable.
Repro: open the Skill Builder for an agent with a custom skill that has a long one-line description (e.g.
k8s-incident-triage— "Read-only Kubernetes incident triage using kubectl. Accepts natural language or structured input. Produces root-cause hypotheses…"). The description runs past the panel edge and the row's Edit button is not visible.Root cause
The row markup + CSS are already set up to truncate the description and keep the button visible:
forge-ui/static/app.js:2849—.sb-custom-skill-row=.sb-custom-skill-info(name + desc) followed by theEditbutton.forge-ui/static/style.css:2183—.sb-custom-skill-info { flex: 1; min-width: 0 }and.sb-custom-skill-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }.So the row-level truncation is correct. The failure is an ancestor min-width blowout:
.skill-builderisdisplay: grid; grid-template-columns: 55% 45%(style.css:1775)..skill-builder-leftis a grid item withoverflow: hidden(style.css:1783) but nomin-width: 0. Grid (and flex) items default tomin-width: auto, which lets their content force the track wider than the55%template — so the long description expands the left panel, and because the panel isoverflow: hidden, the Edit button sitting at the end of the row is clipped instead of scrolled into view (i.e. invisible, not reachable)..sb-custom-skill-row .btn(the Edit button) has noflex-shrink: 0, so it can also be the element that gets squeezed.Suggested fix
min-width: 0to.skill-builder-left(and any intermediate flex/grid containers between it and.sb-custom-skill-row) so the track honors the55%width and the row's existing ellipsis truncation actually engages.flex-shrink: 0to the Edit button in.sb-custom-skill-row .btnso it's never the element that shrinks/clips.Acceptance
With a skill whose name + description are long, the Edit button stays fully visible at the right of its row, and the description truncates within the panel width. Verify at both the
55%/45%desktop layout and the stacked mobile layout (style.css:2131).Context
forge-ui/static/app.js:2849-2863(the custom-skill row + Edit button)forge-ui/static/style.css:2183-2208(row / info / desc),:1775-1796(skill-builder grid + left/right panels)