ix-menu-avatar-item is falsely truncated on some screens

[jul-lam]

What happened?

When the avatar menu is activated, its width should ideally adjust according to the size of its largest element. This behavior is observed on certain screens. However, on some screens, the menu width is not sufficient to accommodate its largest item, resulting in its truncation. Normally, this would occur if there isn’t enough space to display the full width. But in this case, there seems to be ample space, indicating that the issue might be related to screen resolution.

Behavior on Screen 1:

Behavior on Screen 2:

Related to the issue: 934

What type of frontend frameware are you seeing the problem on?

Angular, React, JavaScript, Others

Which version of iX do you use?

v2.0.4

Code to produce this issue.

https://ix.siemens.io/docs/controls/navigation/vertical-tabs#avatar

[jul-lam]

Upon investigation, it was determined that the issue was not related to the resolution. Instead, it was found to be associated with the zoom level, which could be the general screen zoom, browser zoom, or CSS zoom.