Skip to content

[2.x] fix(admin): keep extension danger badge visible on long names#4660

Merged
imorland merged 1 commit into
2.xfrom
im/admin-extension-badge-clipping
May 13, 2026
Merged

[2.x] fix(admin): keep extension danger badge visible on long names#4660
imorland merged 1 commit into
2.xfrom
im/admin-extension-badge-clipping

Conversation

@imorland
Copy link
Copy Markdown
Member

Summary

In the admin sidebar's extension list, abandoned extensions show a red ! danger badge (or yellow warning badge for abandonment without a replacement). When the extension's display name is long enough to trigger the ellipsis-truncation on .Button-labelText, the badge — rendered as a sibling of the title text inside the truncated label — gets clipped by the overflow: hidden and disappears off the right edge.

Originally reported in #4592 against 1.x; the same code path exists on 2.x.

Fix

Move the badge from inside the truncated button label into ExtensionLinkButton::statusItems(), alongside the enabled/disabled status dot. The status items render as siblings of .Button-label (not inside it), so they're not affected by the label's overflow: hidden.

Position the badge absolutely to the left of the existing status dot. Vertically align it by matching the dot's margin-based centering — the dot uses margin: 6px 5px to center its 10px height in the button content area; the 16px-tall badge uses margin: 3px 0 to center identically.

Files

  • framework/core/js/src/admin/components/AdminNav.js — stop rendering the badge inside the ExtensionLinkButton children.
  • framework/core/js/src/admin/components/ExtensionLinkButton.js — add the badge to the statusItems ItemList when extension.abandoned is truthy, with priority 10 so it renders before the status dot.
  • framework/core/less/admin/AdminNav.less — position the badge absolutely, to the left of the status dot, vertically aligned to match.

Test plan

  • Reproduced the original bug on dev: with a long-named extension marked abandoned (via app.data.extensions[id].abandoned = '...'), the danger badge is invisible / clipped off the right edge of the sidebar.
  • With the fix applied: the badge is visible adjacent to the status dot regardless of name length.
  • Non-abandoned extensions still render the status dot in the same position with no badge.
  • Label text still truncates with ellipsis on long names.
  • Visual alignment of badge and dot verified.

Closes #4592

The abandoned-extension danger/warning badge was rendered inside the
button's truncated label, so when the extension name was long enough
to trigger the ellipsis overflow on `.Button-labelText`, the badge
itself got clipped and was no longer visible in the admin sidebar.

Move the badge into `ExtensionLinkButton::statusItems()` (alongside
the enabled/disabled status dot) so it sits as a sibling of the
button label rather than inside it. Position it absolutely to the
left of the dot, vertically aligned by matching the dot's
`margin`-based centering offset for the larger badge size.

Closes #4592
@imorland imorland requested a review from a team as a code owner May 13, 2026 12:32
@imorland imorland added this to the 2.0.0-rc.2 milestone May 13, 2026
@imorland imorland merged commit 5a24a23 into 2.x May 13, 2026
24 checks passed
@imorland imorland deleted the im/admin-extension-badge-clipping branch May 13, 2026 12:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[1.x] Extension danger marker not visible in sidebar for long ext names

1 participant