[A11y][SF][Dialog]: Truncated dialog title text with ellipsis

[Brahmansh]

Describe the bug

We are using Dialog component with headerText property. With zoom settings and with 320 px viewport we observed that long dialog title is getting truncated with ellipsis.

Isolated Example

No response

Reproduction steps

https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--docs
Click on 'Open dialog' button and replace header text with really long text and reduce the screen size to see ellipsis in the header.

Expected Behaviour

Dialog title should not be truncated and should be fully visible.

At 1280 px view port width and 200% zoom page content is expected to reflow without any loss/truncation of content.
At 320 px viewport width, the page contents is expected to scale and reflow to fit the resized viewport without any loss of data or functionality.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.4

UI5 Web Components Version

2.0.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SF

Declaration

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

[Lukas742]

Hi @Brahmansh

if not enough space is available, the headerText is truncating its content by design. To prevent that you could:

• Define a min-width to only allow the dialog to shrink to a specific width.
• Show the Dialog in its fullscreen representation (on mobile the whole screen is used) by setting stretch. This will only give you a few pixels more space, but maybe that's already enough.
• Use a custom header in the header slot and apply your own behavior there. (e.g. text wrapping)

Since the current behavior is following the intended design, I'm going to close this issue.