Merge pull request #4935 from alphagov/fix-password-input-button-grow

Fix password input button unexpectedly stretching

CHANGELOG.md

@@ -11,6 +11,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 - [#4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black](https://github.com/alphagov/govuk-frontend/pull/4906)
 - [#4919: Use canvas colour for cookie banner over hardcoded grey](https://github.com/alphagov/govuk-frontend/pull/4919)
 - [#4899: Remove indents from conditional reveals in radios and checkboxes](https://github.com/alphagov/govuk-frontend/pull/4899)
+- [#4935: Fix password input button unexpectedly stretching](https://github.com/alphagov/govuk-frontend/pull/4935)
 
 ## GOV.UK Frontend v5.3.0 (Feature release)
 

packages/govuk-frontend/src/govuk/components/password-input/_index.scss

@@ -20,7 +20,7 @@
     // 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 programatically disabled.
+    // password visibility by pressing Alt+F8, which cannot be programmatically disabled.
     &::-ms-reveal {
       display: none;
     }
@@ -41,7 +41,6 @@
     @include govuk-media-query($from: mobile) {
       // Buttons are normally 100% width on this breakpoint, but we don't want that in this case
       width: auto;
-      flex-grow: 1;
       flex-shrink: 0;
       flex-basis: 5em;
 

packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml

@@ -152,8 +152,15 @@ examples:
         isPageHeading: true
       id: password-input-with-page-heading
       name: test-name
+  - name: with input width class
+    options:
+      label:
+        text: Password
+      id: password-input-width
+      name: password
+      classes: govuk-input--width-10
   - name: with new-password autocomplete
-    description: Browsers and password managers should prompt to generate a password.
+    description: Supporting browsers and password managers should prompt to generate a password.
     options:
       label:
         text: Password