fix(ui): keep Skill Builder Edit button visible with long name/description (closes #261)#262
Merged
Merged
Conversation
…ption (closes #261) A long skill name+description pushed the row's Edit button off the clipped left panel. Root cause: .skill-builder-left is a 55% grid item with the default min-width: auto, so long content forced the track wider than 55% and, with overflow: hidden, clipped the button. Fixes: min-width: 0 on .skill-builder-left so the track honors its width and the row's existing ellipsis truncation engages; flex-shrink: 0 on .sb-custom-skill-row .btn so the Edit button never shrinks/clips; and min-width:0 + ellipsis on .sb-custom-skill-name/code so a long name truncates too.
…ut (#261) First pass fixed the grid track (.skill-builder-left), but the real blowout is one level down: .sb-custom-skills and .provider-banner are flex items in the display:flex .sb-header, and their default min-width:auto lets a long skill description (nowrap) / model name force them past the 55% panel, which overflow:hidden then clips — taking the Edit button and the model name off-screen. Add min-width:0 to both, plus ellipsis truncation on the model span and flex-shrink:0 on Settings.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #261.
Problem
In the Skill Builder "Skills attached to this agent" list, a skill whose name + description are long pushed the row's Edit button off the right edge of the left panel, where it was clipped and unreachable.
Root cause
The row already truncates correctly (
.sb-custom-skill-info { flex:1; min-width:0 },.sb-custom-skill-desc { …ellipsis }), so the failure was an ancestor min-width blowout:.skill-builder-leftis a55%grid item (.skill-builderisgrid-template-columns: 55% 45%) with the defaultmin-width: auto, so long content forced the track wider than55%; because the panel isoverflow: hidden, the Edit button at the end of the row was clipped rather than scrolled into view.Fix (CSS only,
forge-ui/static/style.css)min-width: 0on.skill-builder-left— the track now honors its55%width, so the row's existing ellipsis truncation actually engages.flex-shrink: 0on.sb-custom-skill-row .btn— the Edit button is never the element that shrinks/clips.min-width: 0+ ellipsis on.sb-custom-skill-name/ its<code>— a long name truncates too, so it can't push the description or button.Verification
go build ./forge-ui/...passes (static assets arego:embeded). Manual check: with a long name+description the Edit button stays fully visible and the name/description truncate within the panel; behavior holds at both the desktop55%/45%layout and the stacked mobile layout (@mediaatstyle.css~2131).No automated test — this is a pure CSS layout fix with no Go test surface.