[2.x] fix(admin): keep extension danger badge visible on long names#4660
Merged
Conversation
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
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
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.
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 theoverflow: hiddenand 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'soverflow: 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 usesmargin: 6px 5pxto center its 10px height in the button content area; the 16px-tall badge usesmargin: 3px 0to center identically.Files
framework/core/js/src/admin/components/AdminNav.js— stop rendering the badge inside theExtensionLinkButtonchildren.framework/core/js/src/admin/components/ExtensionLinkButton.js— add the badge to thestatusItemsItemListwhenextension.abandonedis truthy, with priority10so 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
app.data.extensions[id].abandoned = '...'), the danger badge is invisible / clipped off the right edge of the sidebar.Closes #4592