Floating inside gallery breaks with different retina image sizes across rows (2x retina)

[zoglo]

Affected version(s)

^4.13.31, 5.3

Description

A person in the community found a bug on iPads and we've confirmed that it had to do with the following commit due to retina image sizes increasing the heights and widths above the threshold (2x so 150x200): https://github.com/contao/contao/commit/44b9f13581f671dacb691bc2055fda754e70bfb6

I was able to reproduce that issue:

• via browserstack on an iPad and the latest Safari Version
• with random image sizes that are landscape and portrait
• and having a portrait picture after a landscape picture in a row

The images used in this example are many duplicates of the following, I just used the sortable function within the gallery to make sure it breaks:

https://github.com/contao/contao/assets/55794780/33a57272-ec1f-4bd4-9460-a322b2525d1d https://github.com/contao/contao/assets/55794780/216b2fdb-c8f2-486e-9794-bbb25e98aa6a https://github.com/contao/contao/assets/55794780/c6426aea-62ec-4e3a-a0d9-31190b4096f4 https://github.com/contao/contao/assets/55794780/fb1e884a-72c1-41bc-bd45-56adff980dcb https://github.com/contao/contao/assets/55794780/b209ea9a-029f-4dba-b624-4ea7c0ee1965 https://github.com/contao/contao/assets/55794780/f3f48984-72a4-451b-88de-1cb8dbe8c3b0

Possible solution

This line should be "height" instead of "min-height": https://github.com/contao/contao/blob/8c417810f32236f68a3b9ee618d2842ae86c19cf/core-bundle/src/Resources/contao/themes/flexible/main.css#L1326

cc @ausi

[ausi]

I think we should fix that by adding:

ul.sgallery {
  display: flex;
  flex-wrap: wrap;
}

or:

ul.sgallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 75px;
  gap: 4px;
}

[zoglo]

I think the grid variant would work best due to the height already being an issue (as seen with float)