From 456394f3a406c94416ba08f4fe8ad33d4a5e8919 Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Fri, 12 Apr 2024 12:05:51 +0100
Subject: [PATCH] Fix password input button scaling

Fixes an issue where the password input toggle button would stretch to fill any space not used by the input, such as if the input has a restricted max width.

I think the `flex-grow` property may have been a leftover from earlier in the component's development, as it doesn't appear to be needed now.

Adds a review app example to help keep this in check in future.
---
 CHANGELOG.md                                             | 1 +
 .../src/govuk/components/password-input/_index.scss      | 3 +--
 .../govuk/components/password-input/password-input.yaml  | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36b1b4beed..85454c22e2 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/_index.scss b/packages/govuk-frontend/src/govuk/components/password-input/_index.scss
index 9bcaa69587..09b31e1c0a 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/_index.scss
+++ b/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;
 
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
index 0572679dca..80a4d546bd 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
+++ b/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