Skip to content

fix(ui): keep Skill Builder Edit button visible with long name/description (closes #261) #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
initializ-mk merged 2 commits into from
Jul 10, 2026
Merged

fix(ui): keep Skill Builder Edit button visible with long name/description (closes #261) #262

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94e2e9e
fix(ui): keep Skill Builder Edit button visible with long name/descri…
initializ-mk Jul 9, 2026
3b92c6b
fix(ui): min-width:0 on the sb-header flex items that actually blow o…
initializ-mk Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions forge-ui/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1786,6 +1786,11 @@ body {
border-right: 1px solid var(--border-color);
height: 100%;
overflow: hidden;
/* Grid items default to min-width: auto, which lets long content (a
skill's name/description) force this track wider than its 55% and,
because overflow is hidden, clip the row's Edit button off-screen.
min-width: 0 makes the track honor its width so children truncate. */
min-width: 0;
}

.skill-builder-right {
Expand Down Expand Up @@ -1817,6 +1822,28 @@ body {
background: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-secondary);
/* Flex item in the wrapping .sb-header; without min-width:0 a long
model name forces it past the panel width and the name clips under
Settings. Lay the children out in a row and truncate the model. */
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
}

/* First child is the "provider/model" span — truncate it so a long
model name gets an ellipsis instead of clipping. */
.provider-banner > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

/* Settings button stays fully visible. */
.provider-banner .btn {
flex-shrink: 0;
}

.provider-banner-error {
Expand Down Expand Up @@ -2167,6 +2194,13 @@ body {
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 6px 10px;
/* THE fix for the clipped Edit button: this is a flex item in the
display:flex .sb-header. With the default min-width:auto its
min-content is the full nowrap skill description, so it refuses to
shrink and overflows the 55% panel (clipped by overflow:hidden),
taking the row's Edit button off-screen. min-width:0 lets it honor
its flex-basis so the row's existing ellipsis truncation engages. */
min-width: 0;
}

.sb-custom-skills summary {
Expand Down Expand Up @@ -2198,6 +2232,16 @@ body {
align-items: center;
gap: 6px;
font-weight: 600;
min-width: 0;
}

/* Truncate a long skill name too, so it doesn't push the description /
Edit button. The <code> is a flex child; min-width:0 lets it shrink. */
.sb-custom-skill-name code {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.sb-custom-skill-desc {
Expand All @@ -2207,6 +2251,12 @@ body {
text-overflow: ellipsis;
}

/* The Edit button must never be the element that shrinks/clips when the
name + description are long. */
.sb-custom-skill-row .btn {
flex-shrink: 0;
}

.sb-custom-skills-footer {
padding-top: 6px;
border-top: 1px solid var(--border-color);
Expand Down
Loading