katalyst-govuk-formbuilder 1.10.2 → 1.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e79ac6a3af6144f42fe879e01703e1d7ba5f56616f245ae3224ad2ad146445b3
-  data.tar.gz: d03cb6a9f1b339bb2e2e8e302e2f955352d36587117f4cd3351c44921c155009
+  metadata.gz: 205c71b26044c257f432d3ab429eff7beeeb0c924f775df314732703d240a04f
+  data.tar.gz: 9a1733f6a7e41eefdeb6c096f21cbe7a328d6d7a159b6c57b3382d3f6e153236
 SHA512:
-  metadata.gz: 235fc122738b7aeee77dcc262b9a9988008fabd4f54b00c683406ae92b73c1818f9d150d702e3058de2ef02ccc6d9ca493720c2bd6bff0cd29b76e36afb9b9bb
-  data.tar.gz: b585ddf72b1160a06651c4840e4ca382173b5670348f45b9024fae253fc4bc9fac85acc39bf0cc57afa2e52cc77c938b5cb52d3617d4d8c8f6974eb259e62efd
+  metadata.gz: 5ccc46b82e579a72033f4f79b5afd9f8928962cc67b4f19d4e0a8b513ded75b56c96af01e567e9456a1ab85c520c83da1a2854a27c961561f680e89be14b25f4
+  data.tar.gz: 6ed137133d42622545c5f3b9178f7165976a7eaf732f29bcd353ddcd10232bd84a20dc93488257cb9765a2b0713a05561702c69291efc38d1619633a45f211aa

data/app/assets/builds/katalyst/govuk/formbuilder.css

@@ -43,7 +43,7 @@
 
 
 :root {
-  --govuk-frontend-version: "5.4.0";
+  --govuk-frontend-version: "5.6.0";
   --govuk-frontend-breakpoint-mobile: 20rem;
   --govuk-frontend-breakpoint-tablet: 40.0625rem;
   --govuk-frontend-breakpoint-desktop: 48.0625rem;
@@ -1958,8 +1958,8 @@
 
 .govuk-checkboxes__conditional {
   margin-bottom: 15px;
-  margin-left: 18px;
-  padding-left: 33px;
+  margin-left: 20px;
+  padding-left: 35px;
   border-left: 4px solid #b1b4b6;
 }
 @media (min-width: 40.0625em) {
@@ -2003,6 +2003,10 @@
   margin-left: 10px;
   padding-left: 20px;
 }
+.govuk-checkboxes--small .govuk-checkboxes__divider {
+  width: 24px;
+  margin-bottom: 5px;
+}
 .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
   outline: 3px dashed transparent;
   outline-offset: 1px;
@@ -2330,6 +2334,9 @@
     margin-top: 20px;
   }
 }
+.govuk-error-summary__body > :last-child {
+  margin-bottom: 5px;
+}
 
 .govuk-error-summary__list {
   margin-bottom: 0;
@@ -2592,8 +2599,8 @@
 
 .govuk-radios__conditional {
   margin-bottom: 15px;
-  margin-left: 18px;
-  padding-left: 33px;
+  margin-left: 20px;
+  padding-left: 35px;
   border-left: 4px solid #b1b4b6;
 }
 @media (min-width: 40.0625em) {
@@ -2817,34 +2824,22 @@
   content: " ";
 }
 
-.govuk-visually-hidden-focusable {
+.govuk-visually-hidden-focusable:not(:active):not(:focus) {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   margin: 0 !important;
+  padding: 0 !important;
   overflow: hidden !important;
   clip: rect(0 0 0 0) !important;
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
+  border: 0 !important;
   white-space: nowrap !important;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-.govuk-visually-hidden-focusable:active, .govuk-visually-hidden-focusable:focus {
-  position: static !important;
-  width: auto !important;
-  height: auto !important;
-  margin: inherit !important;
-  overflow: visible !important;
-  clip: auto !important;
-  -webkit-clip-path: none !important;
-  clip-path: none !important;
-  white-space: inherit !important;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
 
 
 
@@ -4132,6 +4127,11 @@
   font-variant-numeric: tabular-nums !important;
 }
 
+.govuk-\!-text-break-word {
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
 
 .govuk-\!-width-full {
   width: 100% !important;

data/node_modules/govuk-frontend/dist/govuk/components/_index.scss

@@ -27,6 +27,7 @@
 @import "phase-banner/index";
 @import "radios/index";
 @import "select/index";
+@import "service-navigation/index";
 @import "skip-link/index";
 @import "summary-list/index";
 @import "table/index";

data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss

@@ -102,9 +102,9 @@
       &:hover {
         color: $govuk-accordion-base-colour;
         background: $govuk-accordion-hover-colour;
-        // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
-        // button. We add a grey box-shadow on hover too, to make the height of the hover state
-        // match the height of the focus state.
+        // The focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of
+        // the hover state match the height of the focus state.
         box-shadow:
           0 -2px $govuk-accordion-hover-colour,
           0 4px $govuk-accordion-hover-colour;
@@ -147,7 +147,7 @@
 
       position: relative;
 
-      // Set size using rems to make the icon scale with text if user resizes text in their browser
+      // Set size using rems so icon scales with text
       width: govuk-px-to-rem(20px);
       height: govuk-px-to-rem(20px);
 
@@ -184,14 +184,15 @@
     .govuk-accordion__section-button {
       width: 100%;
 
-      padding: govuk-spacing(2) 0 0 0;
+      padding: govuk-spacing(2) 0 0;
 
       border: 0;
 
       border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
 
-      // Visually separate the section from the one underneath when user changes colours in their
-      // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      // Visually separate the section from the one underneath when user changes
+      // colours in their browser. See
+      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
       border-bottom: govuk-spacing(2) solid transparent;
 
       color: $govuk-text-colour;
@@ -230,8 +231,8 @@
       }
 
       &:focus {
-        // Remove default focus border around button as
-        // styling is being applied to inner text elements that receive focus
+        // Remove default focus border around button as styling is being applied
+        // to inner text elements that receive focus
         outline: 0;
 
         .govuk-accordion__section-heading-text-focus,
@@ -257,9 +258,10 @@
       }
     }
 
-    // Remove the transparent border when the section is expanded to make it clear that the heading
-    // relates to the content below. Adjust padding to maintain the height of the element.
-    // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
+    // Remove the transparent border when the section is expanded to make it
+    // clear that the heading relates to the content below. Adjust padding to
+    // maintain the height of the element. See
+    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
     .govuk-accordion__section--expanded .govuk-accordion__section-button {
       padding-bottom: govuk-spacing(3);
       border-bottom: 0;
@@ -269,8 +271,8 @@
       }
     }
 
-    // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
-    // Styling adds some spacing
+    // As Chevron icon is vertically aligned it overlaps with the focus state
+    // bottom border – this adds some spacing
     .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
       padding-bottom: 3px;
 
@@ -299,9 +301,9 @@
       color: $govuk-link-colour;
     }
 
-    // Add space between the icon and text.
-    // Avoid applying spacing directly to the icon as the use of `transform` will change the
-    // placement of any margins.
+    // Add space between the icon and text. Avoid applying spacing directly to
+    // the icon as the use of `transform` will change the placement of any
+    // margins.
     .govuk-accordion__show-all-text,
     .govuk-accordion__section-toggle-text {
       margin-left: govuk-spacing(1);
@@ -310,23 +312,25 @@
 
     // Background colour adjustment when user changes colours in Firefox
     //
-    // When user changes colours in Firefox, text colour inside <button> is always black
-    // (regardless of the custom colours the user has set). This is fine when the text in the
-    // button is not nested inside another element because when user changes colours in Firefox,
-    // the immediate background colour of buttons is always white (again, regardless of user's
-    // custom colours).
+    // When user changes colours in Firefox, text colour inside <button> is
+    // always black (regardless of the custom colours the user has set). This is
+    // fine when the text in the button is not nested inside another element
+    // because when user changes colours in Firefox, the immediate background
+    // colour of buttons is always white (again, regardless of user's custom
+    // colours).
     //
-    // However, when the text inside <button> is wrapped inside another element AND that element
-    // sets a background colour, the text colour is still black but the background of that nested
-    // element gets the user's custom background colour. When the custom background is a lighter
-    // hue, the contrast might be sufficient. But if the user's custom background colour is a
-    // darker colour, the contrast with the text might not be sufficient.
+    // However, when the text inside <button> is wrapped inside another element
+    // AND that element sets a background colour, the text colour is still black
+    // but the background of that nested element gets the user's custom
+    // background colour. When the custom background is a lighter hue, the
+    // contrast might be sufficient. But if the user's custom background colour
+    // is a darker colour, the contrast with the text might not be sufficient.
     //
-    // To ensure sufficient contrast, override the background colour set by the focus state on the
-    // nested elements to be transparent.
+    // To ensure sufficient contrast, override the background colour set by the
+    // focus state on the nested elements to be transparent.
     //
-    // Also override the background colour of the Show/Hide chevrons which set a background colour
-    // on hover.
+    // Also override the background colour of the Show/Hide chevrons which set a
+    // background colour on hover.
     @media screen and (forced-colors: active) {
       .govuk-accordion__show-all:hover,
       .govuk-accordion__section-button:hover {

data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss

@@ -19,10 +19,10 @@
     margin-bottom: 0;
 
     &::after {
-      // Zero-width space that will reserve vertical space when no hint is provided
-      // as:
-      // - setting a min-height is not possible without a magic number
-      //   because the line-height is set by the `govuk-font` call above
+      // Zero-width space that will reserve vertical space when no hint is
+      // provided as:
+      // - setting a min-height is not possible without a magic number because
+      //   the line-height is set by the `govuk-font` call above
       // - using `:empty` is not possible as the hint macro outputs line breaks
       content: "\200B";
     }

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss

@@ -159,7 +159,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
@@ -255,6 +255,11 @@
       padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small checkboxes.
     //
     // We use a hover state for small checkboxes because the touch target size

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss

@@ -4,11 +4,11 @@
 
   .govuk-cookie-banner {
     padding-top: govuk-spacing(4);
-    // The component does not set bottom spacing.
-    // The bottom spacing should be created by the items inside the component.
+    // The component does not set bottom spacing. The bottom spacing should be
+    // created by the items inside the component.
 
-    // Visually separate the cookie banner from content underneath
-    // when user changes colours in their browser.
+    // Visually separate the cookie banner from content underneath when user
+    // changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
     background-color: $govuk-canvas-background-colour;
@@ -25,21 +25,24 @@
     margin-bottom: -$border-bottom-width;
 
     &[hidden] {
-      // Support older browsers which don't hide elements with the `hidden` attribute
-      // when the visibility of cookie and replacement messages is toggled.
+      // Support older browsers which don't hide elements with the `hidden`
+      // attribute when the visibility of cookie and replacement messages is
+      // toggled.
       display: none;
     }
 
     &:focus {
-      // Remove the native visible focus indicator when the element is programmatically focused.
+      // Remove the native visible focus indicator when the element is
+      // programmatically focused.
       //
-      // The focused cookie banner is the first element on the page and the last thing the user
-      // interacted with prior to it gaining focus.
-      // We therefore assume that moving focus to it is not going to surprise users, and that giving
-      // it a visible focus indicator could be more confusing than helpful, especially as the
-      // element is not normally keyboard operable.
+      // The focused cookie banner is the first element on the page and the last
+      // thing the user interacted with prior to it gaining focus. We therefore
+      // assume that moving focus to it is not going to surprise users, and that
+      // giving it a visible focus indicator could be more confusing than
+      // helpful, especially as the element is not normally keyboard operable.
       //
-      // We have flagged this in the research section of the guidance as something to monitor.
+      // We have flagged this in the research section of the guidance as
+      // something to monitor.
       //
       // A related discussion: https://github.com/w3c/wcag/issues/1001
       outline: none;

data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss

@@ -6,8 +6,7 @@
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {
     @include govuk-clearfix;
-    // font-size: 0 removes whitespace caused by inline-block
-    font-size: 0;
+    font-size: 0; // removes whitespace caused by inline-block
   }
 
   .govuk-date-input__item {

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss

@@ -30,6 +30,10 @@
     > * + * {
       @include govuk-responsive-margin(4, "top");
     }
+
+    > :last-child {
+      @include govuk-responsive-margin(1, "bottom");
+    }
   }
 
   // Cross-component class - adjusts styling of list component

data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss

@@ -7,9 +7,8 @@
     @include govuk-clearfix;
   }
 
-  // Fix for Firefox < 53
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
-  // stylelint-disable selector-type-no-unknown -- Ignore unknown 'x:-moz-any-link'
+  // Fix for Firefox < 53 (https://bugzil.la/504622)
+  // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
   @supports not (caret-color: auto) {
     .govuk-fieldset,
     x:-moz-any-link {
@@ -59,8 +58,7 @@
   }
 
   // When the legend contains an H1, we want the H1 to inherit all styles from
-  // the legend. Effectively we want to be able to treat the heading as if it is
-  // not there.
+  // the legend. Effectively treat the heading as if it is not there.
   .govuk-fieldset__heading {
     margin: 0;
     font-size: inherit;

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss

@@ -12,11 +12,10 @@
     margin-left: -$component-padding;
     padding: $component-padding;
 
-    // The default file upload button in Safari does not
-    // support setting a custom font-size. Set `-webkit-appearance`
-    // to `button` to drop out of the native appearance so the
-    // font-size is set to 19px
-    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    // The default file upload button in Safari does not support setting a
+    // custom font-size. Set `-webkit-appearance` to `button` to drop out of the
+    // native appearance so the font-size is set to 19px
+    // https://webkit.org/b/224746
     &::-webkit-file-upload-button {
       -webkit-appearance: button;
       color: inherit;
@@ -26,13 +25,13 @@
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Use `box-shadow` to add border instead of changing `border-width`
-      // (which changes element size) and since `outline` is already used for the
-      // yellow focus state.
+      // (which changes element size) and since `outline` is already used for
+      // the yellow focus state.
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
 
-    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
-    // so that component receives focus in Firefox.
+    // Set "focus-within" to fix https://bugzil.la/1430196 so that component
+    // receives focus in Firefox.
     // This can't be set together with `:focus` as all versions of IE fail
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.

data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss

@@ -38,6 +38,14 @@
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
+  .govuk-header--full-width-border {
+    border-bottom-color: $govuk-header-border-color;
+
+    .govuk-header__container {
+      border-bottom-color: transparent;
+    }
+  }
+
   .govuk-header__logotype {
     display: inline-block;
     position: relative;

data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss

@@ -11,8 +11,10 @@
     height: govuk-px-to-rem(40px);
     margin-top: 0;
     padding: govuk-spacing(1);
-    // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
-    // as background-color and color need to always be set together, color should not be set either
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;
 
@@ -24,7 +26,8 @@
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element
       outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
+      // Double the border by adding its width again. Use `box-shadow` for this
+      // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
       // it will change the element size. Also, `outline` cannot be utilised
       // here as it is already used for the yellow focus state.
@@ -63,7 +66,7 @@
   }
 
   // em measurements are based on the point size of the typeface
-  // Extra space is added on the right hand side to allow for the Safari prefill icon
+  // Extra space is added on the right to allow for the Safari prefill icon
 
   .govuk-input--width-30 {
     max-width: 29.5em;

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss

@@ -15,7 +15,8 @@
   .govuk-notification-banner__header {
     padding: 2px govuk-spacing(3) govuk-spacing(1);
 
-    // Ensures the notification header appears separate to the notification body text in high contrast mode
+    // Ensures the notification header appears separate to the notification body
+    // text in high contrast mode
     border-bottom: 1px solid transparent;
 
     @include govuk-media-query($from: tablet) {
@@ -68,7 +69,7 @@
     @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
 
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
 
     padding: 0;
   }

data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss

@@ -54,8 +54,8 @@
   .govuk-pagination__next {
     @include govuk-typography-weight-bold;
 
-    // Use flex to get around a whitespace issue between the arrow svg and the link text
-    // without having to rely on whitespace control from backend tooling
+    // Use flex to avoid extra space being introduced when whitespace exists
+    // between the arrow svg and the link text
     .govuk-pagination__link {
       display: flex;
       align-items: center;
@@ -96,7 +96,7 @@
     @include govuk-typography-weight-bold;
     color: $govuk-secondary-text-colour;
 
-    // Remove hover state for ellipsis items as they don't have links within them
+    // Remove hover state for ellipsis items as they don't contain links
     &:hover {
       background-color: transparent;
     }
@@ -118,8 +118,8 @@
       }
     }
 
-    // Add link hover decoration to prev/next text if no label present on prev/next only mode
-    // We do this so that we have a hover state in all possible instances
+    // Add link hover decoration to prev/next text if no label present on
+    // prev/next only mode,  so that we have a hover state in all cases
     &:hover,
     &:active {
       .govuk-pagination__link-title--decorated {
@@ -151,11 +151,10 @@
     @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
     display: inline-block;
-    padding-left: govuk-spacing(6);
   }
 
   .govuk-pagination__icon {
-    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    // Set size using rems to make the icon scale with text
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
     color: $govuk-secondary-text-colour;
@@ -175,23 +174,18 @@
   .govuk-pagination--block {
     display: block;
 
-    .govuk-pagination__item {
-      padding: govuk-spacing(3);
-      float: none;
-    }
-
     .govuk-pagination__next,
     .govuk-pagination__prev {
       padding-left: 0;
       float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
     }
 
     .govuk-pagination__next {
       padding-right: govuk-spacing(3);
-
-      .govuk-pagination__icon {
-        margin-left: 0;
-      }
     }
 
     // Only apply a border between prev and next if both are present
@@ -199,41 +193,34 @@
       border-top: 1px solid $govuk-border-colour;
     }
 
-    // Reset both these elements to their inline default, both to ensure that the focus state
-    // for block mode "shrink wraps" text as expected
-    .govuk-pagination__link,
-    .govuk-pagination__link-title {
-      display: inline;
-    }
-
-    // Set the after pseudo element to a block which makes the title visually display
-    // as block level whilst programmatically being inline
-    // We do this to get around an NVDA quirk where adjacent block level
-    // elements are always read out separately
+    // Set the after pseudo element to a block which makes the title visually
+    // display as block level whilst programmatically being inline. We do this
+    // to get around an NVDA quirk where adjacent block level elements are
+    // always read out separately
     .govuk-pagination__link-title::after {
       content: "";
       display: block;
     }
 
     .govuk-pagination__link {
+      padding-left: govuk-spacing(6);
       text-align: left;
 
-      &:focus {
-        // apply focus styling to the label within the link as if it were being focused
-        // to get around a display issue with a focusable inline element containing a mixture
-        // of inline and inline-block level elements
-        .govuk-pagination__link-label {
-          @include govuk-focused-text;
-        }
-      }
-
       &:not(:focus) {
         text-decoration: none;
       }
     }
 
     .govuk-pagination__icon {
-      margin-right: govuk-spacing(2);
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: govuk-spacing(6) * -1;
+      float: left;
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss

@@ -14,17 +14,21 @@
     @include govuk-media-query($until: tablet) {
       padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
 
-      // This is an if-all-else-fails attempt to stop long words from overflowing the container
-      // on very narrow viewports by forcing them to break and wrap instead. This
-      // overflowing is more likely to happen when user increases text size on a mobile eg. using
-      // iOS Safari text resize controls.
+      // This is an if-all-else-fails attempt to stop long words from
+      // overflowing the container on very narrow viewports by forcing them to
+      // break and wrap instead. This overflowing is more likely to happen when
+      // user increases text size on a mobile eg. using iOS Safari text resize
+      // controls.
       //
-      // The overflowing is a particular problem with the panel component since it uses white
-      // text: when the text overflows the container, it is invisible on the white (page)
-      // background. When the text in our other components overflow, the user might have to scroll
-      // horizontally to view it but the the text remains legible.
+      // The overflowing is a particular problem with the panel component since
+      // it uses white text: when the text overflows the container, it is
+      // invisible on the white (page) background. When the text in our other
+      // components overflow, the user might have to scroll horizontally to view
+      // it but the the text remains legible.
       overflow-wrap: break-word;
-      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
     }
   }