Merge pull request #2668 from alphagov/fix-summary-list-action-alignment

Fix Summary List action link alignment
alphagov · Jun 28, 2022 · db42757 · db42757
2 parents 28c6c0d + 1df31ba
commit db42757
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#2668: Fix Summary List action link alignment](https://github.com/alphagov/govuk-frontend/pull/2668)
+
 ## 4.2.0 (Feature release)
 
 ### New features

diff --git a/src/govuk/components/summary-list/_index.scss b/src/govuk/components/summary-list/_index.scss
@@ -93,21 +93,43 @@
   }
 
   .govuk-summary-list__actions-list-item {
-    display: inline;
-    margin-right: govuk-spacing(2);
-    padding-right: govuk-spacing(2);
+    display: inline-block;
   }
 
   // In older browsers such as IE8, :last-child is not available,
   // so only show the border divider where it is available.
-  .govuk-summary-list__actions-list-item:not(:last-child) {
-    border-right: 1px solid $govuk-border-colour;
+  @include govuk-media-query($until: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-right: govuk-spacing(2);
+      padding-right: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:last-child) {
+      border-right: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
   }
 
-  .govuk-summary-list__actions-list-item:last-child {
-    margin-right: 0;
-    padding-right: 0;
-    border: 0;
+  @include govuk-media-query($from: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-left: govuk-spacing(2);
+      padding-left: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:first-child) {
+      border-left: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:first-child {
+      margin-left: 0;
+      padding-left: 0;
+      border: 0;
+    }
   }
 
   // No border on entire summary list

diff --git a/src/govuk/components/summary-list/template.njk b/src/govuk/components/summary-list/template.njk
@@ -29,11 +29,11 @@
               {{ _actionLink(row.actions.items[0]) | indent(12) | trim }}
             {% else %}
               <ul class="govuk-summary-list__actions-list">
-                {% for action in row.actions.items %}
+                {%- for action in row.actions.items -%}
                   <li class="govuk-summary-list__actions-list-item">
-                    {{ _actionLink(action) | indent(18) | trim }}
+                    {{- _actionLink(action) | indent(18) | trim -}}
                   </li>
-                {% endfor %}
+                {%- endfor -%}
               </ul>
             {% endif %}
           </dd>

diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js
@@ -21,7 +21,7 @@ const cssnano = require('cssnano')
 const postcsspseudoclasses = require('postcss-pseudo-classes')({
   // Work around a bug in pseudo classes plugin that badly transforms
   // :not(:whatever) pseudo selectors
-  blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)', ':hover)']
+  blacklist: [':not(', ':disabled)', ':first-child)', ':last-child)', ':focus)', ':active)', ':hover)']
 })
 
 // Compile CSS and JS task --------------