Split li tags in link list helper

This way we generate the same HTML as we generate everywhere where we
manually generate lists of links. Having a blank space betwwen tags
results in a space being introduced when the elements are displayed
inline (or with `inline-block`).

So in places where we don't want that space between the elements we have
to use a flex layout.

app/assets/stylesheets/mixins.scss

@@ -228,12 +228,19 @@
 }
 
 %sdg-goal-list {
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
   margin-bottom: 0;
   margin-left: 0;
 
   li {
-    display: inline-block;
+    margin-bottom: 1ch;
+    margin-right: 1ch;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 

app/assets/stylesheets/sdg/goals/index.scss

@@ -11,9 +11,9 @@
 
       line-height: 0;
       margin-bottom: $spacing;
-      padding-left: $spacing / 2;
-      padding-right: $spacing / 2;
-      width: 1 * 100% / 6;
+      margin-left: $spacing / 2;
+      margin-right: $spacing / 2;
+      width: calc(100% / 6 - #{$spacing});
 
       .sdg-goal-icon {
         width: 100%;

app/assets/stylesheets/sdg/goals/tag_list.scss

@@ -1,11 +1,3 @@
 .sdg-goal-tag-list {
   @extend %sdg-goal-list;
-
-  li {
-    margin-bottom: 1ch;
-
-    &:not(:last-child) {
-      padding-right: 1ch;
-    }
-  }
 }

app/helpers/link_list_helper.rb

@@ -7,7 +7,7 @@ module LinkListHelper
         tag.li(({ "aria-current": true } if current)) do
           link_to text, url, link_options
         end
-      end)
+      end, "\n")
     end
   end
 end

spec/helpers/link_list_helper_spec.rb

@@ -13,7 +13,9 @@ describe LinkListHelper do
     it "generates a list of links" do
       list = helper.link_list(["Home", "/"], ["Info", "/info"], class: "menu")
 
-      expect(list).to eq '<ul class="menu"><li><a href="/">Home</a></li><li><a href="/info">Info</a></li></ul>'
+      expect(list).to eq '<ul class="menu">' +
+        '<li><a href="/">Home</a></li>' + "\n" +
+        '<li><a href="/info">Info</a></li></ul>'
       expect(list).to be_html_safe
     end