Fix details text and summary left alignment

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS.UK frontend Changelog
 
+## 3.1.1 - Unreleased
+
+:wrench: **Fixes**
+
+- Details - fix the left alignment of the details text and summary ([Issue 615](https://github.com/nhsuk/nhsuk-frontend/issues/615))
+
 ## 3.1.0 - 24 April 2020
 
 :new: **New features**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",
@@ -21,14 +21,14 @@
     "jest:ci": "jest"
   },
   "dependencies": {
-    "accessible-autocomplete": "^2.0.2",
+    "accessible-autocomplete": "^2.0.3",
     "sass-mq": "^5.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
     "babel-loader": "^8.1.0",
-    "backstopjs": "^4.5.0",
+    "backstopjs": "^5.0.1",
     "eslint": "^6.8.0",
     "eslint-config-nhsuk": "^1.0.0",
     "gulp": "^4.0.2",
@@ -37,14 +37,14 @@
     "gulp-connect": "^5.7.0",
     "gulp-nunjucks": "^5.0.1",
     "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^4.1.0",
     "gulp-uglify": "^3.0.2",
-    "gulp-zip": "^5.0.1",
+    "gulp-zip": "^5.0.2",
     "htmlhint": "^0.11.0",
     "husky": "^3.1.0",
-    "jest": "^25.2.7",
+    "jest": "^25.5.4",
     "minimist": "^1.2.5",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "nunjucks": "^3.2.1",
     "sass-lint": "^1.13.1",
     "webpack-stream": "^5.2.1"

packages/components/details/_details.scss

@@ -15,6 +15,7 @@
  * 4. Only underline the text, not the arrow
  * 5. Remove the default details marker so we can style our own consistently and
  *    ensure it displays in Firefox
+ * 6. Custom padding to left align the details text with the summary
  */
 
 .nhsuk-details {
@@ -79,7 +80,7 @@
   border-left: nhsuk-spacing(1) solid $color_nhsuk-grey-4;
   margin-top: nhsuk-spacing(2);
   padding: nhsuk-spacing(3);
-  padding-left: nhsuk-spacing(4);
+  padding-left: 20px; /* [6] */
   @include top-and-bottom();
 
   p {