Do not allow cards to grow more than 4-per-row

The big issue here is that this would mess with the paging on the backend, unless we re-made a call to the server, which I think is less than desirable. I think the right solution for now is to not let any 'row' be more than 4 columns, and keep paging in multiples of 12. If we need to, let's enforce a max-width on the cards as well.

kwiseman → changed the visibility of the branch 1.0.x to hidden.

I noticed that limiting the max-width on individual cards at very wide screen sizes could result in the "Sort by" box and other parts of the UI being isolated (and harder to find) on the right side of the page. I added a screen shot to demo what limiting the max-width could look like. Given other UI changes in progress and @chrisfromredfin 's agreement, I only changed the CSS variable controlling the maximum number of columns.

Rebased - looks good on safari.

There is a bug on Firefox ( see upload → ) but it degrades gracefuly - it doesn't look bad imo and is usable.

Unfortunately, I couldn't replicate the behavior shown in #12, and I mostly use Firefox. I'm not sure this is a bug because the --grid-column-count variable isn't supposed to change because it's being used to limit the number of possible columns, not directly set the number of columns that will be shown. The CSS that does this is between lines 262-280 in pb.css, and those lines were directly inspired by core (see core/modules/views/css/views-responsive-grid.css). This CSS Tricks article has a more detailed explanation.

It seems like a very edge case limited to Firefox Developer edition. I was artificially changing the grid columns values just to demonstrate something weird was happening for me, I realise that it doesn't change like that.

Confirming that this worked for me. I checked screen widths up to 5000px; 4 columns were maintained.

Thanks for the the follow-through!

Automatically closed - issue fixed for 2 weeks with no activity.