mi6
Top navigation not responsive when groups overflow screen width
Summary of the bug
When using multiple navigation groups and their width overflows the screen width (at a width larger than when it collapses to a toggle button), the text wraps rather than staying on one line and an ic-horizontal-scroll is not displayed.
🪜 How to reproduce
- Go to this StackBlitz.
- See that the horizontal scrolling behaviour is not applied.
📸 Screenshots or code
🧐 Expected behaviour
The ic-horizontal-scroll component should be displayed just like it is when using navigation items on their own (without groups), e.g.:
Additional info
Should probably check that the fix also works for if someone is using a combination of navigation groups and navigation items.
Would be good to check if this occurs outside Stackblitz - we've seen issues with ResizeObserver not working in Stackblitz before. This might be a CSS issue though - do we need to turn off text-wrap on the navGroup items?
We do advise against having long labels in navigation items on the guidance site, so developers shouldn't be encountering this issue - have moved into Next PI at a lower priority to reflect this