cropped `::before` and `::after` icons in WebKit Browser after `@db-ux/react-core-components` package update

[d-koppenhagen]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

1. Update from @db-ux/react-core-components@3.1.18 to @db-ux/react-core-components@3.1.19
2. use a component with icon like this one:

   <DBInfotext>
     Auswählen, um Informationen zu Ihrem Hilfsmittel anzugeben
   </DBInfotext>

3. Open the app in Safari (iOS or macOS)
4. Vary the viewport sizes, sometimes the icons are cropped

I think it's the case everytime ::before or ::after is used.

Expected Behaviour

No cropped icons.

Screenshots

Browser version

Safari

Add any other context about the problem here.

https://codesandbox.io/p/sandbox/github/db-ux-design-system/examples/tree/main/react-example

Which DB business unit do you work for?

DB InfraGO AG

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

No response

What project are you working on?

Mobility4All

[d-koppenhagen]

From the changes between the versions, it looks like this commit: 9643085 could have caused the bug, at least the other ones seems not related.

[d-koppenhagen]

After analysis:

It seems in WebKit overflow: clip seems to have a higher precedence than inline-size. This causes the icons are cropped.

Minimal size of an element in the direction specified by 'writing-mode'.

The solution will be to change to min-inline-size and max-inline-size, to have fixed sizes which aren't cropped:

    min-inline-size: var(--db-icon-font-size, 1.5rem);
    max-inline-size: var(--db-icon-font-size, 1.5rem);

[mfranzke]

After analysis:

It seems in WebKit overflow: clip seems to have a higher precedence than inline-size. This causes the icons are cropped.

Minimal size of an element in the direction specified by 'writing-mode'.

The solution will be to change to min-inline-size and max-inline-size, to have fixed sizes which aren't cropped:

min-inline-size: var(--db-icon-font-size, 1.5rem);
max-inline-size: var(--db-icon-font-size, 1.5rem);

in this case, it's only shrunk based on being used in a flex-layout. So if we prevent this by the following decaration, it looks fine as well:
flex-shrink: 0