From 1267f3e21b11ccd84f3d07ae45ec9ab1f0b7b365 Mon Sep 17 00:00:00 2001
From: mark-start-nhs <Mark.start1@nhs.net>
Date: Mon, 6 Jan 2025 11:25:05 +0000
Subject: [PATCH] [PRMP-1240] Reduce width of NHS number input field

---
 .../patientSearchPage/PatientSearchPage.test.tsx     | 12 ++++++++++++
 .../pages/patientSearchPage/PatientSearchPage.tsx    |  1 +
 2 files changed, 13 insertions(+)

diff --git a/app/src/pages/patientSearchPage/PatientSearchPage.test.tsx b/app/src/pages/patientSearchPage/PatientSearchPage.test.tsx
index ad598ac1f..ab0cc84ba 100644
--- a/app/src/pages/patientSearchPage/PatientSearchPage.test.tsx
+++ b/app/src/pages/patientSearchPage/PatientSearchPage.test.tsx
@@ -348,6 +348,18 @@ describe('PatientSearchPage', () => {
                 });
             },
         );
+
+        it('a defined width class is applied to the NHS number input field', async () => {
+
+            const definedWidthClass = 'nhsuk-input--width-10';
+
+            renderPatientSearchPage();
+
+            const input = screen.getByTestId('nhs-number-input');
+            expect(input).toHaveClass(definedWidthClass);
+
+        });
+
     });
 });
 
diff --git a/app/src/pages/patientSearchPage/PatientSearchPage.tsx b/app/src/pages/patientSearchPage/PatientSearchPage.tsx
index 8fff917dd..696f7a60a 100644
--- a/app/src/pages/patientSearchPage/PatientSearchPage.tsx
+++ b/app/src/pages/patientSearchPage/PatientSearchPage.tsx
@@ -112,6 +112,7 @@ function PatientSearchPage() {
                 <Input
                     id="nhs-number-input"
                     data-testid="nhs-number-input"
+                    className="nhsuk-input--width-10"
                     label="Enter NHS number"
                     hint="A 10-digit number, for example, 485 777 3456"
                     type="text"