diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 3f133cc42..a7b82c049 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/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; + } } } diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index 2faccff8b..1efb09297 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/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%; diff --git a/app/assets/stylesheets/sdg/goals/tag_list.scss b/app/assets/stylesheets/sdg/goals/tag_list.scss index 831cba49f..f2149ef53 100644 --- a/app/assets/stylesheets/sdg/goals/tag_list.scss +++ b/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; - } - } } diff --git a/app/helpers/link_list_helper.rb b/app/helpers/link_list_helper.rb index 5042d55c5..f3e00d1bb 100644 --- a/app/helpers/link_list_helper.rb +++ b/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 diff --git a/spec/helpers/link_list_helper_spec.rb b/spec/helpers/link_list_helper_spec.rb index 8fd04f5ac..31ff73768 100644 --- a/spec/helpers/link_list_helper_spec.rb +++ b/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 '' + expect(list).to eq '' expect(list).to be_html_safe end