Keep email and password input widths equal

The show/hide button cuts into the space for the password input. In
order for the email and password inputs to stay the same width, we need
to add padding to the email input's wrapper equal to the space taken up
by the show/hide button (including margin)

We only want this change to apply to the signin form, not anywhere we
have an email input, like on the create/invite new user page. I've used
the form action in the selector to make this specific, which is a bit
unconventional - we could add and use a class instead, but this works
without changing the template. It is however reliant on the Device new
session path not changing

app/assets/stylesheets/application.scss

@@ -90,7 +90,7 @@ $applications-table-actions-gap: 10px;
   }
 }
 
-.govuk-table__actions { 
+.govuk-table__actions {
   @include govuk-media-query($until: $vertical-on-smallscreen-breakpoint) {
     .govuk-button, .govuk-link {
       display: block;
@@ -109,3 +109,15 @@ $applications-table-actions-gap: 10px;
     gap: $applications-table-actions-gap;
   }
 }
+
+$show-button-em-size: 19px;
+$show-button-em-multiplier: 5;
+$show-button-width: calc($show-button-em-size * $show-button-em-multiplier);
+$show-button-left-margin: 5px;
+$show-button-space: calc($show-button-width + $show-button-left-margin);
+
+@include govuk-media-query($from: mobile) {
+  form[action="/users/sign_in"] .govuk-form-group:has(input[name="user[email]"]) {
+    padding-right: $show-button-space;
+  }
+}