search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

🪴 Comment Gardening Part 2: Return of the 80 character limit #5091

Closed 36degrees closed 4 months ago

36degrees commented 5 months ago

Follow up to last year's smash hit Comment gardening 🪴 this is another pass at trying to consistently wrap Sass comments at 80 characters, which we mostly do, except for when we don't.

I've rewritten a few comments, mainly where we were really close to fitting on one line but not quite. I've also opted to use short URLs for bug trackers where possible (bugzil.la, webkit.org/b) for brevity.

Finally, I've removed some ancient comments where we recorded what padding selects used to have in 2017 and pondered whether we should use box-sizing: border-box everywhere 🤔

github-actions[bot] commented 5 months ago

:clipboard: Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.34 KiB
dist/govuk-frontend-development.min.js 41.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 87.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 82.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs 981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.33 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 41.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs 4.86 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 79.24 KiB 39.84 KiB
accordion.mjs 23.5 KiB 12.39 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app

Action run for b39ba6a267ab6e6df5fe479ebf58f3b0b74ec7b8

github-actions[bot] commented 5 months ago

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
index 5ad8810cf..00c08ff1e 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
+++ b/packages/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);

@@ -190,8 +190,9 @@

       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 {
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss b/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
index 858b7735b..972aadf4a 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
+++ b/packages/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";
     }
diff --git a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
index 5b1129a82..0d4d5d5b5 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
+++ b/packages/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;
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss b/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss
index 64f9bcbf9..5cc15c99b 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss
+++ b/packages/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 {
diff --git a/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss b/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss
index 1045ca393..2ab7c447f 100644
--- a/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss
+++ b/packages/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;
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index 5735689b0..af3de0ee9 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/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.
diff --git a/packages/govuk-frontend/dist/govuk/components/input/_index.scss b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
index 694a0d214..18735de0b 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/_index.scss
+++ b/packages/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;
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
index 0a1cf60a2..ace29e551 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
+++ b/packages/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) {
diff --git a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
index 5f74f5bf6..9bd247007 100644
--- a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
+++ b/packages/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 {
@@ -155,7 +155,7 @@
   }

   .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;
@@ -199,17 +199,17 @@
       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
+    // 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;
@@ -219,9 +219,9 @@
       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
+        // 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;
         }
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/_index.scss b/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
index 71f6c525b..d24833eb3 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
+++ b/packages/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;
     }
   }

diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss b/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
index a1dc27047..0140d56aa 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
@@ -4,30 +4,33 @@
 @include govuk-exports("govuk/component/password-input") {
   .govuk-password-input__wrapper {
     // This element inherits styles from .govuk-input__wrapper, including:
-    // - being display: block with contents in a stacked column below the mobile breakpoint
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
     // - being display: flex above the mobile breakpoint

     @include govuk-media-query($from: mobile) {
       flex-direction: row;

-      // The default of `stretch` makes the toggle button appear taller than the input, due to using
-      // box-shadow, which we don't particularly want in this situation
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
       align-items: flex-start;
     }
   }

   .govuk-password-input__input {
-    // IE 11 and Microsoft Edge comes with its own password reveal function. We want to hide it,
-    // so that there aren't two controls presented to the user that do the same thing but aren't in
-    // sync with one another. This doesn't affect the function that allows Edge users to toggle
-    // password visibility by pressing Alt+F8, which cannot be programmatically disabled.
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We
+    // want to hide it, so that there aren't two controls presented to the user
+    // that do the same thing but aren't in sync with one another. This doesn't
+    // affect the function that allows Edge users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
     &::-ms-reveal {
       display: none;
     }
   }

   .govuk-password-input__toggle {
-    // Add margin to the top so that the button doesn't obscure the input's focus style
+    // Add top margin so the button doesn't obscure the input's focus style
     margin-top: govuk-spacing(1);

     // Remove default margin-bottom from button
@@ -39,7 +42,7 @@
     }

     @include govuk-media-query($from: mobile) {
-      // Buttons are normally 100% width on this breakpoint, but we don't want that in this case
+      // Buttons are normally 100% wide on mobile, but we don't want that here
       width: auto;
       flex-shrink: 0;
       flex-basis: 5em;
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index 602ba8f57..149d8d32a 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -9,8 +9,9 @@
   $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
   $govuk-small-radios-size: 24px;
   $govuk-radios-label-padding-left-right: govuk-spacing(3);
-  // When the default focus width is used on a curved edge it looks visually smaller.
-  // So for the circular radios we bump the default to make it look visually consistent.
+  // When the default focus width is used on a curved edge it looks visually
+  // smaller. So for the circular radios we bump the default to make it look
+  // visually consistent.
   $govuk-radios-focus-width: $govuk-focus-width + 1px;

   .govuk-radios__item {
@@ -173,9 +174,10 @@
   // =========================================================

   // The narrow border is used in the conditional reveals because the border has
-  // to be an even number in order to be centred under the 40px checkbox or radio.
+  // to be an even number in order to be centred under the 40px checkbox radio.
   $conditional-border-width: $govuk-border-width-narrow;
-  // Calculate the amount of padding needed to keep the border centered against the radios.
+  // Calculate the amount of padding needed to keep the border centered against
+  // the radios.
   $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the radios
   $conditional-margin-left: $conditional-border-padding;
diff --git a/packages/govuk-frontend/dist/govuk/components/select/_index.scss b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
index af2261030..19a6797a7 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
@@ -6,16 +6,16 @@
   .govuk-select {
     @include govuk-font($size: 19, $line-height: 1.25);

-    box-sizing: border-box; // should this be global?
+    box-sizing: border-box;

     // This min-width was chosen because:
-    // - it makes the Select noticeably wider than it is taller (which is what users expect)
+    // - it makes the Select wider than it is tall (which is what users expect)
     // - 11.5em matches the 'length-10' variant of the input component
     // - it fits comfortably on screens as narrow as 240px wide
     min-width: 11.5em;
     max-width: 100%;
     height: govuk-px-to-rem(40px);
-    padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
+    padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;

     // Default user agent colours for selects can have low contrast,
@@ -28,8 +28,8 @@
       // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size) and
-      // since `outline` is already used for the yellow focus state.
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
     }

diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss b/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
index 9c4803617..844307c5c 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
@@ -35,11 +35,13 @@

   .govuk-skip-link-focused-element {
     &: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.
       //
-      // We set the focus on the linked element (this is usually the <main> element) when the skip
-      // link is activated to improve screen reader announcements. However, we remove the visible
-      // focus indicator from the linked element because the user cannot interact with it.
+      // We set the focus on the linked element (this is usually the <main>
+      // element) when the skip link is activated to improve screen reader
+      // announcements. However, we remove the visible focus indicator from the
+      // linked element because the user cannot interact with it.
       //
       // A related discussion: https://github.com/w3c/wcag/issues/1001
       outline: none;
diff --git a/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss
index 992136e27..a3ca2ce00 100644
--- a/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss
@@ -179,7 +179,8 @@
   .govuk-summary-card__title-wrapper {
     padding: govuk-spacing(3);

-    // Ensures the card header appears separate to the summary list in forced colours mode
+    // Ensures the card header appears separate to the summary list in forced
+    // colours mode
     border-bottom: 1px solid transparent;
     background-color: govuk-colour("light-grey");

diff --git a/packages/govuk-frontend/dist/govuk/components/tag/_index.scss b/packages/govuk-frontend/dist/govuk/components/tag/_index.scss
index 282d13bb6..75f6f7892 100644
--- a/packages/govuk-frontend/dist/govuk/components/tag/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/tag/_index.scss
@@ -12,11 +12,12 @@
     // where to break off of.
     max-width: $govuk-tag-max-width;

-    // These negative margins make sure that the tag component doesn’t increase the
-    // size of its container. Otherwise, for example, a table row containing a tag
-    // will be taller than one containing plain text.
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
     //
-    // The negative margin added to the top and bottom matches the extra padding added.
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
     margin-top: -2px;
     margin-bottom: -3px;

@@ -30,11 +31,13 @@
     overflow-wrap: break-word;

     // When forced colour mode is active, for example to provide high contrast,
-    // the background colour of the tag is the same as the rest of the page. To ensure
-    // that the tag is perceived as separate from any surround text, it is made bold.
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
     //
-    // Transparent outlines are no longer added, as they make the Tag look indistinguishable
-    // from a button – but the tag is not interactive in the same way.
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
     @media screen and (forced-colors: active) {
       font-weight: bold;
     }
diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
index 98fc99a79..c0095c40e 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
@@ -11,11 +11,13 @@
     list-style-type: none;
   }

-  // This uses table layout so that the task name and status always appear side-by-side, with the width of
-  // each 'column' being flexible depending upon the length of the task names and statuses.
+  // This uses table layout so that the task name and status always appear
+  // side-by-side, with the width of each 'column' being flexible depending upon
+  // the length of the task names and statuses.
   //
-  // The position is set to 'relative' so than an absolutely-positioned transparent element box
-  // can be added within the link so that the whole row can be clickable.
+  // The position is set to 'relative' so than an absolutely-positioned
+  // transparent element box can be added within the link so that the whole row
+  // can be clickable.
   .govuk-task-list__item {
     display: table;
     position: relative;
@@ -30,9 +32,9 @@
     border-top: 1px solid $govuk-border-colour;
   }

-  // This class is added to the <li> elements where the task name is a link.
-  // The background hover colour is added to help indicate that the whole row is clickable, rather
-  // than just the visible link text.
+  // This class is added to the <li> elements where the task name is a link. The
+  // background hover colour is added to help indicate that the whole row is
+  // clickable, rather than just the visible link text.
   .govuk-task-list__item--with-link:hover {
     background: $govuk-task-list-hover-colour;
   }
@@ -55,9 +57,9 @@
     color: $govuk-secondary-text-colour;
   }

-  // This adds an empty transparent box covering the whole row, including the task status and
-  // any hint text. Because this is generated within the link element, this allows the whole area
-  // to be clickable.
+  // This adds an empty transparent box covering the whole row, including the
+  // task status and any hint text. Because this is generated within the link
+  // element, this allows the whole area to be clickable.
   .govuk-task-list__link::after {
     content: "";
     display: block;
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
index 3945df09d..f3ea1365d 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
@@ -6,7 +6,7 @@
   .govuk-textarea {
     @include govuk-font($size: 19, $line-height: 1.25);

-    box-sizing: border-box; // should this be global?
+    box-sizing: border-box;
     display: block;
     width: 100%;
     min-height: 40px;
@@ -25,8 +25,8 @@
       // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size) and
-      // since `outline` is already used for the yellow focus state.
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
     }

diff --git a/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss b/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
index d221eecf6..4e79791f2 100644
--- a/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
@@ -25,8 +25,8 @@
       margin-top: -5px;
     }

-    // When a user customises their colours the background colour will often be removed.
-    // Adding a border to the component keeps it's shape as a circle.
+    // When a user customises their colours the background colour will often be
+    // removed. Adding a border to the component keeps it's shape as a circle.
     border: 3px solid $govuk-text-colour;
     border-radius: 50%;

diff --git a/packages/govuk-frontend/dist/govuk/helpers/_links.scss b/packages/govuk-frontend/dist/govuk/helpers/_links.scss
index 2c769d1c5..a19ee3b1d 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_links.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_links.scss
@@ -229,7 +229,7 @@
   }

   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover {
     @if type-of($govuk-text-colour) == color {
       color: rgba($govuk-text-colour, 0.99);
@@ -265,7 +265,7 @@
   }

   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover,
   &:active {
     color: rgba(govuk-colour("white"), 0.99);

Action run for b39ba6a267ab6e6df5fe479ebf58f3b0b74ec7b8