Skip to content

Skill Builder: Edit button clipped off-screen when a skill's name + description are long #261

Description

@initializ-mk

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.

edit button hidden

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

  1. 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.
  2. Add flex-shrink: 0 to the Edit button in .sb-custom-skill-row .btn so it's never the element that shrinks/clips.
  3. 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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions