From c5e062ea7e57af55bd890a6263a313a0643c8a05 Mon Sep 17 00:00:00 2001
From: Ynda Jas <yndajas@gmail.com>
Date: Wed, 18 Sep 2024 15:03:34 +0100
Subject: [PATCH] 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 | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index d59a84e1b..e72aba116 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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;
+  }
+}