[feature request] Optimise the map view

[dalibormrska]

Problem

Currently in the map view we have a 50/50 split between the List and the Map. The amount of columns of cards in the List is determined by breakpoints (ex. 1120px). But this means that on small desktop (screenshot) the 3 columns are too tight and the cards are unreadable. This is also the case with the viewport width of around 850px where 2 columns are also too tight.

Basically changing the amount of columns by breakpoints (40em, 52em, 70em = 640px, 832px, 1120px) is not working well for the list cards.

Proposed solution

There is no fixed solution proposed, you can be creative and find the ideal solution for this issue. Yayy! But the possible approaches that came to my mind include:

1. Setting min and max widths for the List cards. This is a strong candidate for a solution, because we can confidently set a limit saying - under a certain width the card would be too packed and also that above a certain width it feels unnecessarily large. In my design I tried between 250px and 400px.

2. Not enforcing the 50/50 split between the map and the list. I can see a solution where the map can be tighter (taking for ex. 40vw) so that the List cards have enough space and are not tightly packed. This could be done maybe with some css clamp() function magic?

3. Setting min and max width for the List. Relevant only for the vw of around 900 where the list could hit a min-width to prevent the List cards from getting even more packed. And the max-width of the List could be utilised for really large and wide screens, so that the cards don't get too wide.

This is not a definitive list of possible options I believe. Feel free to have a go and propose your own solution.