diff --git a/forge-ui/static/style.css b/forge-ui/static/style.css
index 67928f98..05a09acc 100644
--- a/forge-ui/static/style.css
+++ b/forge-ui/static/style.css
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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);