[Feature] Adjust business listing grid

[magnificode]

User Story

As a user I want to see 12 business listings per page So I can more easily scan business listings

Acceptance Criteria

• [ ] Business listing grid contains a max of 12 cards
• [ ] Each card sizes dynamically between 325px (min) and 450px (max)
• [ ] Each row should contain between 1 and 4 cards based on the defined min and max above.

Describe the solution you'd like

The business listing grid is currently leveraging Chakra UI's SimpleGrid component. This should be adjusted to match the parameters listed above.

[Mhmdabed11]

I can take this since I have worked before on the businesses page. Should we have 12 listings including the promo ?

[magnificode]

@Mhmdabed11 thanks for picking this up! I think technically we'll want 11 listings + the promo, for a total of 12 cards in the grid. Let me know if you have any other questions!

[Mhmdabed11]

@magnificode. In the below image, each card has a width of 325px (which is the min mentioned above). Below, I had to adjust the max-width of the page from 1220px to 1518px to account for the 325px card width. I think that it became a bit crowded in this case.

.

What I found looked good is the following

1. On large screen

2. On medium screen

3. On mobile screen Maybe this is not what you are looking for, I am happy to discuss further. Also please let me know if I am missing something here in the original requirements.

[magnificode]

@Mhmdabed11 this is great, thank you so much for the thorough documentation. Let me pull @shapirone in here to comment on the top screen shot.

Looks like some of our listings with multiple buttons are looking a bit squished at this scale. Any thoughts on how we can address that?

[shapirone]

Good catch @Mhmdabed11 - what's the min. width you're recommending for the card?

[Mhmdabed11]

Sorry for the late reply!! @magnificode You are welcome! @shapirone Actually I think that a min width of 348px for a card given you have 3 cards on a row makes sense at this point. Given the max-width of main is 1220px, padding is 3rem left and right and grid-gap: 2.5rem, 348px is what remains for the each card.

[shapirone]

Got it, thanks again @Mhmdabed11 ! Let's make the min-width of the card 350px.

EDIT: Actually, thinking about this for tablet let's keep min-width at 325px and wrap the buttons when we need to.

[Mhmdabed11]

@shapirone 325px with row having 4 grid items? If that is the case then we have to increase the max-width of the parent container

[shapirone]

@Mhmdabed11 I'm not sure why we would limit main to 1220px - I would prefer 1600px.

@magnificode do you have input there?

[magnificode]

@Mhmdabed11 @shapirone feel free to bump that up to 1600! No harm in increasing the grid size on larger screens.

[Mhmdabed11]

I think we can close this since it is done!