Resolve "Nav item ellipsis cuts off text too early"
What does this MR do and why?
Resolves #412204 (closed).
The NavItem component has an optional slot in which we render the
Before this MR, this slot was positioned with absolute to the right. And to not overlap long text with it, the text div was given a gl-pr-8. But this extra padding was also active when there was no slot provided, so the text was cut off way too early anywhere outside the context switcher.
With this change, the slot element is treated like a normal flex child. And to stick it to the right, the flex child that holds the nav item text is set to grow. This approach completly avoids overlapping, so we can now remove that extra padding.
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.