[ui5-shellbar]: Logo size to small after upgrade to 2.27.1

[mofterdinger]

Bug Description

Hi, we are using UI5 Web Components in a SAP internal application. After upgrading UI5 Web Components from 2.25.0 to 2.27.1 the logo size in the shellbar decreased dramatically. We are using a UI5 icon as logo by putting it into the logo slot of the shellbar as described here: https://ui5.github.io/webcomponents/components/fiori/ShellBar/#logo

Here are 2 screenshots:

With 2.25.0:

With 2.27.1:

In our opinion the logo size in 2.27.1 is too small. Is this a bug or changed by intention ? How can we fix it ?

Thanks,
Markus

Affected Component

ui5-shellbar

Expected Behaviour

The same login size as before the update.

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.27.1

Browser

Chrome

Operating System

MacOS 27

Additional Context

No response

Organization

SAP SE

Declaration

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

[mofterdinger]

In the changelog to UI5 2.26.0 I found this entry:

ui5-shellbar: align legacy logo styles with branding (#13929) (58b42ef), closes #13010 #13535 #12499

Could this issue be related to this change ?

[dimovpetar]

Hello @mofterdinger ,

I am not able to reproduce the issue. Please provide minimal example, which can be used for reproducing. I've tested with this one.

Best regards,
Petar

[mofterdinger]

Hi @dimovpetar, providing a minimal example will be a bit complicated. We are using UI5 Web Components in combination with the Rust framework Dioxus. So, if I would provide an example application, it would be a Rust application. I'm not sure if you would be able to run this application locally, because it requires several Rust related tools.
Access to the internal application also requires special permission, which is only available for a small group of developers at SAP.
Would it be somehow sufficient to give you some information / data I can grab with the Chrome inspector from our running application ?
Thanks,
Markus

[mofterdinger]

Hi, I was not able to reproduce this issue with a simple test application, which is really strange. Only in our productive application this issues occurred, but we found a workaround. We surrounded the icon with a div and the logo size was as expected.
Therefore I'm closing this issue.
Thanks,
Markus

[github-actions]

This issue has been closed. To reopen, just leave a comment!

[nnaydenow]

Hello colleagues,

I’m reopening this issue because Markus and I had a quick debugging session and identified the cause.

The logo breaks when the application uses standard reset styles such as:

* {
  box-sizing: border-box;
}

The issue can be reproduced here:
https://stackblitz.com/edit/vitejs-vite-cqy9ergq?file=package.json

In my view, the styles introduced in the following commit should be reworked so that they are not affected by external reset styles, since they are internal to the component:
#13929

---

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

Could you please take a look?