Improve the flow of the spacing on the watch cards using a whole bunch of nested (not subgrid) grids #71
Conversation
…h of nested (not subgrid) grids
Deploying matrix-2024 with
|
| Latest commit: |
96ba666
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0ea045e5.matrix-2024.pages.dev |
| Branch Preview URL: | https://mtrnord-a-bunch-off-grids.matrix-2024.pages.dev |
There was a problem hiding this comment.
The result is clearly an improvement, I don't see any new issues with it.
Its a bit strange that this whitespace is not collapsing:
In a perfect world, in these situations, the description on the right would continue to fill the whitespace caused by the 3 line title on the left
Yeah I tried it but it seems like without javascript it's not possible. The css can either add the dots at the very end of the content and then does not respect if the overflow is cut off (so in these cases it wouldnt work) or it can do it after a specific number of lines (we do 3 here). Sadly there seems to be no way for a best of both Worlds with pure css and html :/ |
| @@ -137,64 +137,72 @@ | |||
| .talks-grid { | |||
| display: grid; | |||
| grid-template-columns: repeat(auto-fill, 358px); | |||
| grid-template-rows: repeat(auto-fit, 533px); | |||
There was a problem hiding this comment.
Where does this 533 come from?
If I reduce it to say 490 (probably not the optimal number), it seems like my first comment is resolved
There was a problem hiding this comment.
It was the number Firefox calculated for the card height of the old/deployed grid.
There was a problem hiding this comment.
Then I think we could probably diverge from it? Can you repro what I mean?
|
The mobile version improved compared to main. The right margin is missing here: |
This is not perfect either but it seems to have better text flow than whats on main now that I had to untruncate the headers since those hid valuable information.
kinda helps #70 ?
cc review from @HarHarLinks appreciated (cant do it via github itself :|)