fix: top and bottom padding of small preview card on mobile

[ayoayco]

Fix for the thumbnail appears not filling up the height of the small preview cards on mobile

before	after

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	fba9e51
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/63bf07dcf89d920008ff469f

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	fba9e51
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/63bf07dc4bded2000870b6ec
😎 Deploy Preview	https://deploy-preview-974--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[patak-dev]

@ayoayco I added the p4 because we need some padding for big cards

They should look like this:

[ayoayco]

Oh hmm yeah that doesn't look good without padding top/bottom

[ayoayco]

I will add a condition to handle big cards

[patak-dev]

@ayoayco I think we also need the padding on small cards. On the bottom here there should be a bit more padding, no?

[ayoayco]

@ayoayco On the bottom here there should be a bit more padding, no?

To my eyes this is okay, but will try to find a balance for the thumbnail size as well

[ayoayco]

@patak-dev found a happy balance: made square thumbnail tiny-bit bigger and this puts more space for the small preview info description

Also for big preview card we get to keep the p4 :)

[patak-dev]

Looks good!