Add shared ellipsis truncation to Badge/Label components#26493
Merged
Conversation
After the Mantine migration the `Badge` (and the `Label` built on it) stopped abbreviating long text: the label's `overflow: visible` cancelled Mantine's ellipsis, and the root's `width: fit-content` floored the badge at its text width so it never had a constrained width to truncate against. Let the badge shrink (`min-width: 0` / `max-width: 100%`), make the label a single-line ellipsis context, and give a span-wrapped label child (e.g. content carrying a `title` tooltip) its own ellipsis context. Padding is preserved, so the truncated text keeps a minimum left/right gap. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The bug with the MITRE chips mentioned in https://github.com/Graylog2/graylog-plugin-enterprise/issues/14582 seems fixed, thank you! However, the tag chips do not get truncated and can therefore overlap with other column's content. See screen recording. Untitled.mov |
Member
Author
|
@systemboogie: Should be fixed now. Can you retest? |
systemboogie
approved these changes
Jun 30, 2026
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
2 participants
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.
Description
Adds the CSS plumbing so
BadgeandLabelcan truncate overflowing text with an ellipsis when they are width-constrained:Badgeno longer forceswidth: fit-content; it allowsmin-width: 0/max-width: 100%so it can shrink as a flex/grid item, and its.mantine-Badge-labelnow usesoverflow: hidden+text-overflow: ellipsis+white-space: nowrap.Labeladds the same single-line ellipsis context to a child<span>(e.g. one carrying atitletooltip), so wrapped content truncates instead of overflowing.This is the shared building block the Enterprise change
Use shared Label truncation for MITRE category chipsbuilds on, letting it drop its localCategoryLabelstyled wrapper.Fixes https://github.com/Graylog2/graylog-plugin-enterprise/issues/14582
Motivation and Context
Long text inside badges/labels overflowed their container instead of truncating. Centralizing the truncation behavior in the base components avoids per-call-site styled wrappers.
How Has This Been Tested?
Verified in the web interface that long badge/label content now truncates with an ellipsis when constrained, and renders unchanged when it fits.
Screenshots (if appropriate):
Types of changes
Checklist:
/nocl Internal refactoring of shared Badge/Label styling with no user-facing behavior change.