[ui5-menu]: Title overlaps with submenu arrow

[subint1994]

Bug Description

Im using ui5-webcomponents-react Menu and MenuItem for a use case. When the text in the Menu is longer, it gets overlapped with the arrow icon at the end when it has a sub menu.

Affected Component

UI5 Menu

Expected Behaviour

There should be clear gap between the end of the menu title and submenu arrow on the right.

Isolated Example

https://codesandbox.io/s/charming-river-vrz70g?file=/src/App.js

Steps to Reproduce

1. Have some long text as a menu title
2. Add submenus to this menu.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.10.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[petyabegovska]

Hi @subint1994,

Currently, the menu is using internally the List component which truncates the long texts: see how it is with additional text (the shortcuts):

What is exactly your use case and will the truncation work for it or you will need to show the whole text as in OpenUI5:

Best regards, Petya

[subint1994]

Hi @petyabegovska,

In my use case, I need to show the entire text as in OpenUI5 for the Menu title with submenu items.

Also is it possible to show the entire text without truncation when there is additional text also?

Regards, Subin

[petyabegovska]

Hi @subint1994,

Most probably we will need to refactor the control which will take time. We will research the options and may fix first the overlapping.

Best regards, Petya

[sneha-ajit]

@petyabegovska We are also facing the same issue. Waiting for a fix.

[petyabegovska]

Hi @DMihaylova and @ui5-webcomponents-topic-b,

Can you fix the overlapping?