[PRMP-1240] Reduce width of NHS number input field

nhsconnect · Jan 6, 2025 · 1267f3e · 1267f3e
1 parent 90207ac
commit 1267f3e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git 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
@@ -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"