Stack password input button on mobile

Author: colinrotherham

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

@@ -11,22 +11,6 @@
 ////
 
 @include nhsuk-exports("nhsuk/components/password-input") {
-  .nhsuk-password-input__wrapper {
-    // This element inherits styles from .nhsuk-input__wrapper, including:
-    // - being display: block with contents in a stacked column below the mobile
-    //   breakpoint
-    // - being display: flex above the mobile breakpoint
-
-    @include nhsuk-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
-      align-items: flex-start;
-    }
-  }
-
   .nhsuk-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
@@ -36,30 +20,22 @@
     &::-ms-reveal {
       display: none;
     }
+
+    @include nhsuk-media-query($until: tablet) {
+      // Set max-width to override potential width override class on the input
+      max-width: 100%;
+    }
   }
 
   .nhsuk-password-input__toggle {
-    // Add top margin so the button doesn't obscure the input's focus style
-    margin-top: nhsuk-spacing(1);
-
-    // Remove default margin-bottom from button
-    margin-bottom: 0;
-
     // Hide the button by default, JS removes this attribute
     &[hidden] {
       display: none;
     }
 
-    @include nhsuk-media-query($from: mobile) {
+    @include nhsuk-media-query($from: tablet) {
       flex-basis: 5em;
       flex-shrink: 0;
-
-      // Buttons are normally 100% wide on mobile, but we don't want that here
-      width: auto;
-
-      // Move the spacing from top to the left
-      margin-top: 0;
-      margin-left: nhsuk-spacing(1);
     }
   }
 }

packages/nhsuk-frontend/src/nhsuk/components/password-input/template.njk

@@ -47,7 +47,7 @@
 {%- set buttonHtml %}
 {{ button({
   type: "button",
-  classes: "nhsuk-button--secondary nhsuk-password-input__toggle nhsuk-js-password-input-toggle" + (" " + params.button.classes if params.button.classes),
+  classes: "nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle" + (" " + params.button.classes if params.button.classes),
   text: params.showPasswordText | default("Show"),
   attributes: {
     "aria-controls": id,
@@ -73,7 +73,7 @@
     }
   },
   inputWrapper: {
-    "classes": "nhsuk-password-input__wrapper"
+    classes: "nhsuk-form-group nhsuk-form-group--inline"
   },
   label: params.label,
   hint: params.hint,