Add wide option for badges, modularise badge rendering and avoid badge gaps

[milanlakhani]

This ensures that there are no gaps when some badges on the left handside of the dialog box aren't used, by only allocating a div when the badge is in use.

This also adds a boolean setting, wide_badges, that can allow the badges to be positioned one on top of the other rather than in side by side pairs. This can be especially useful when a badge contains a lot of text.

If wide_badges is not set, it is assumed to be false.

The placement of the wide_badges config in settings.yml is as follows:

big_picture:
  main:
    wide_badges: true
    ...

CC @michaelmoss @awright @GeriG966 @danielsilverstone-ct @abhirampataru

[netlify[bot]]

✅ Deploy Preview for landscapeapp ready!

Name	Link
🔨 Latest commit	ff7be348b0be047bce5f8ff4025001ffd530545b
🔍 Latest deploy log	https://app.netlify.com/sites/landscapeapp/deploys/637412b6ef302b000863bf83
😎 Deploy Preview	https://deploy-preview-855--landscapeapp.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.