[Breadcrumb][Web Components][2.20.1]: Overflow icon misalignment

[kaloyantinchev]

Bug Description

In WC, the ellipsis of the overflow is not aligned correctly with the adjacent arrow. They both should be centrally aligned. The ellipsis is also a smaller size. The width and height of the icons should be 1 rem according to specification. The current implementation does not match this requirement, which results in a visual inconsistency.

Affected Component

https://ui5.github.io/webcomponents/components/Breadcrumbs/

Expected Behaviour

Issue is visual.

Isolated Example

https://ui5.github.io/webcomponents/play/#eNq9VW1r2zAQ_iuqP7UhstJu2TrHCaPZBv20sHUfBoYhW5dYrS0ZWY4bSv77TqrdpSwrFIZxwL5HunvuhdzzEEgl4D7MbVkE0UOgeAlBdAiOg0wrC8oiHJ9QSqqC7zZGN0rQtS4EoXSRqPjk09flzc_VZ-KcHODepOBqM08CUEmAmHviHLjAb4K_uLa7ApwxipS2p5GAtVQgzsgDYkLWjioiSiuYIbB3_j6-P19rk4GgmS60oVzcNrV9dpfErI_vjBIsJ1nOTQ0WU_px84Ve-qy6I1c54lsJbaWNTQLS1Y1gK4XN5wK2MgPqjTGRSlrJC1pnvID5eTjpgllpkfM7L6sCYvZoYdmsqxs_Uy12xKeGoVOe3XXd9JVEZMvNKaU1r66ejpbu5GxGcpCbHKu8mE6q-1lHeGQmFFQ3F3ehkVOaGqTPTFOm9eIIRqWFkuQG1phSbm1VR4y1bRtiGmGmS-yG5WbjO_crxaneIfk3rS1Z8Q1gp4_F-29EK25wDp7qfDiqi-Go3gxH9XY4qulwVO-Go3o_HNXlcFQfBvwLT17JtVg25sn7BV92bNH9U7FQfTIjK0vsrnKLuNSiKQCTr03mTC5VeFtj6igj_qLf4m53P25x1gvdi_s32I_7UAfy2iOH2spGh1FyKYCMWKJk6dSIJEHIDo7rpnKwTxDl7m9fn8Ez_4_YHdZCihOqUCSVrRkqrGVXfxrWh3uNzzV2v_cL9vvfWVTr2w

Steps to Reproduce

Reproduction not needed. Issue visible in WC Overflow Sample.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.20.1

Browser

Chrome

Operating System

iOS

Additional Context

No response

Organization

Core Design

Declaration

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

[hinzzx]

Hi team @UI5/ui5-team-ctr-pir ,

Could you please check this issue ?

The Breadcrumbs overflow ellipsis icon is sized 0.875rem instead of 1rem as per spec, and uses vertical-align: text-top while the adjacent separator uses baseline .

Best,
Stoyan