rux-monitoring-icon notifications can get cut off when slotted in right-side slot of GSB
kiley-mitti opened this issue · 0 comments
Describe the bug
When a rux-monitoring-icon is slotted into rux-global-status-bar's right-side slot, the number of notifications rux-monitor-icon has may get cut off on the right side.
Current behavior
Notifications visual can be cut off at the end of the GSB if there are enough notifications.
Expected behavior
the notifications should not be cut off
CodeSandbox
Code Sample
Environment (please complete the following information):
- Browser [e.g. chrome, safari] All major browsers
- @astrouxds/astro-web-components version [e.g. 7.0.0] astro 7 latest
Additional context
The problem is essentially a css issue. The notifications are absolutely positioned on rux-monitoring-icon when the notification badge get long enough to fall outside the width of rux-monitoring-icon the end gets cut off visibly by the end of slotted content.
An interim solution for those experiencing this issue could be to add a small amount of margin to rux-monitoring-icon. Alternatively one could use the shadow part 'monitoring-badge' to change the left positioning of the notifications badge.
Or use the shadow part part="container" on rux-global-status-bar to remove overflow:hidden