[Bug]: imagesize in flipcard is not correct

[Steffka24]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Bug type

Functionality

It affects the following packages

Components

Which version of Lyne Components are you using

1.12.1

Operating system

Windows

Browser / Browser version

Chrome Version 131.0.6778.69

Input mode

None

Additional settings

No response

What happened?

We have included illustrations in the flipcard module. This is displayed correctly on SBB-Int. Now a bug has appeared on SBB-Prod and we suspect the blurred image is a problem here.
By changing the width of the grid column from "1fr" to "minmax(0,1fr)" on the element with the class "sbb-flip-card-summary", may be it is able to fix the error. Please investigate the problem yourself again

Links:
SBB INT correct: https://int-www.sbb.ch/de/angebote/halbtax-plus
SBB PROD issue: https://www.sbb.ch/de/angebote/halbtax-plus

Steps to reproduce the issue

1. Go to https://www.sbb.ch/de/angebote/halbtax-plus
2. Scroll to Flipcard
3. You can see the Card "Optimal mit EasyRide" - their you can see the incorrect representation of the illustration. Compare with the correct version on INT.

Relevant log output

No response

[georgwittberger-telekom-mms]

Some more findings about the possible reasons for this issue:

On the production environment where we encountered this problem the blurred image inside sbb-image cannot be loaded. That means the img element with class sbb-image__blurred derives its intrinsic size not from the real image resource but from the given width and height attributes. In our case the values are width="1000" and height="562" (unsure how the component picked these values).

This larger intrinsic size of the blurred image seems to have an impact on the grid column widths in the sbb-flip-card-summary component. This component sets the following grid column template:

grid-template-columns: repeat(2, 1fr);

It's important to note that 1fr is just a shorthand for minmax(auto, 1fr). This means that the image inside the column could increase the column width unintentionally. This is why e.g. Tailwind uses minmax(0, 1fr).

So it should be possible to fix this issue by setting the following column template:

grid-template-columns: repeat(2, minmax(0, 1fr));