Improves responsiveness of KPI widgets on new all websites dashboard

[sgiehl]

Description:

KPI widgets previously were always displayed in one row. If there was to few space, it became scrollable.

Note: The layout approach is a bit more flexible than the original design. This had to be applied so it works also with different languages.

With this PR the KPI widgets will wrap into multiple rows. For tablet like screen sizes, there will now be two KPIs displayed per row.

For mobile like screen sizes only one KPI per row will be shown:

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[michalkleiner]

Thanks for the work @sgiehl, I think there are some funny widths where we may need to adjust the styling. I know people usually don't play with their browser widths like in the video below, but we should try to avoid situations where we have stacked tiles but the border is on the side as well as displaying a scrollbar as some margins are too big or tiles too wide for the given overall width. Do you reckon you can look at adjust those? Thanks!

Screen.Recording.2024-12-11.at.3.57.41.PM.mp4

stale