govuk-list needs margin adjustment

[dashouse]

On small screens govuk-list > <li> has no bottom margin (with 5px being applied at tablet and above)

This works when the bullet or number modifier is added e.g. class="govuk-list govuk-list--bullet" because the bullet marker gives a clear indication of the start of a new list item.

When the govuk-list class is applied on it's own, such as a list of links the <li>'s appear to run into each other like so:

My suggestion would be to apply to spacing to the govuk-list class for all breakpoints, then remove when the modifiers are added.

  // add spacing to list on all breakpoints

  %govuk-list > li {
      margin-bottom: govuk-spacing(1);
  }

  %govuk-list--bullet > li,
  %govuk-list--number > li {
  // remove spacing from govuk-list
  margin-bottom: 0; 
  
  // add spacing back in from tablet
   @include govuk-media-query($from: tablet) {
      margin-bottom: govuk-spacing(1);
    }
  }

Before

After