ui5-shellbar: badge on button can overlap neighboring button

[JarrettChan]

Bug Description

At certain widths the buttons in the Shellbar will shrink to min-width (2.25rem|2rem) from 2.5rem width, and the badge on button can overlap the neighboring button. Also "badge on button" does not match Visual Core specs for Fiori 3 or Horizon https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698912659 https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2208784109

Expected Behavior

Badge should not overlap next button.

Steps to Reproduce

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/ShellBar/
2. Change viewport width to ~1327px Notification badge 99+ overlaps profile button

Context

• UI5 Web Components version: 1.7.1
• OS/Platform: macOS
• Browser: Chrome 105.0.5195.125 (Official Build) (x86_64)
• Affected component: ui5-shellbar, ui5-button

Log Output / Stack Trace / Screenshots

Horizon Fiori 3 Horizon Fiori 3

Priority

• [x] Low
• [ ] Medium
• [ ] High
• [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: SuccessFactors

[niyap]

Hello @SAP/ui5-webcomponents-topic-p,

The issue could be easily reproduced in the Playground if you smaller the width. In Horizon theme, the badge goes over the avatar, in Fiori 3, it is sticked to the avatar but not over it.

Could you please look over?

Thank you in advance!

Kind Regards, Niya

[yanaminkova]

Internal Reference: BGSOFUIPIRIN-5998