ShellBar : Screen title is truncated on resizing the screen to 200%.

[DikshaHub]

Describe the bug

When the screen zoomed in to 200%, the title gets truncated.

Isolated Example

https://stackblitz.com/edit/github-wcwdgu-f5wwkv?file=src%2FApp.tsx

Reproduction steps

1. Open the isolated example.

2. On the top right click on 'Open preview in new tab'. A new tab with UI will be opened with the isolated example. (https://githubwcwdguf5wwkv-tr3y--5173--dc4d7514.local-credentialless.webcontainer.io/ )

3. Resize the screen to 200 %.

4. The screen title "SAP New Project Here," gets truncated when screen zoomed in to 200%.

Expected Behaviour

Truncation should be avoided on resizing the screen to 200%.

Screenshots or Videos

UI5 Web Components for React Version

~1.29.0

UI5 Web Components Version

~1.24.0

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @DikshaHub

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi colleagues, the issue is reproducible in this example of your documentation.

[kineticjs]

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

The issue is about undesired truncation of the ui5-shellbar title in the case when the overall space is small, but there is still some empty unused space on the side of the truncated title. For example, we see 7.5rem unused space taken from the "middle" container when it is empty. Can we check if we can improve the handling of the available space?

[DikshaHub]

Hi @kineticjs Certainly! We can improve the handling of the available space. Our requirement is to ensure that text around 30 characters long does not get truncated.

[DikshaHub]

@kineticjs Text around 30 characters gets truncated when resized to 200%. Please advise on how to address this.