diff --git a/application/CohortManager/src/Web/app/components/search-nhs-number.tsx b/application/CohortManager/src/Web/app/components/search-nhs-number.tsx index 05f4a0e88..629be5d5b 100644 --- a/application/CohortManager/src/Web/app/components/search-nhs-number.tsx +++ b/application/CohortManager/src/Web/app/components/search-nhs-number.tsx @@ -7,13 +7,13 @@ export function SearchNhsNumber() { const [nhsNumber, setNhsNumber] = useState(""); const isValidNhsNumber = (value: string): boolean => { - const cleaned = value.replaceAll(" ", ""); + const cleaned = value.trim().replaceAll(" ", ""); return cleaned.length === 10 && /^\d+$/.test(cleaned); }; const handleSubmit = (e: FormEvent) => { e.preventDefault(); - const cleanedNhsNumber = nhsNumber.replaceAll(" ", ""); + const cleanedNhsNumber = nhsNumber.trim().replaceAll(" ", ""); if (!isValidNhsNumber(nhsNumber)) { router.push(`/exceptions/noResults`); @@ -39,12 +39,11 @@ export function SearchNhsNumber() { }; return ( - - - ); } diff --git a/application/CohortManager/src/Web/app/globals.scss b/application/CohortManager/src/Web/app/globals.scss index 6100477da..579b71dac 100644 --- a/application/CohortManager/src/Web/app/globals.scss +++ b/application/CohortManager/src/Web/app/globals.scss @@ -165,8 +165,9 @@ .nhsuk-header__content { display: flex; align-items: center; + gap: clamp(8px, 2vw, 24px); + flex-wrap: wrap; justify-content: space-between; - flex-wrap: nowrap; } .nhsuk-header__service { @@ -176,16 +177,12 @@ .nhsuk-header__search { flex: 1; - min-width: 250px; -} - -.nhsuk-header .nhsuk-header__search { - margin: 0 100px; + min-width: min(240px, 40vw); + max-width: 420px; } .nhsuk-header__search-form { display: flex; - fill: currentColor; } .nhsuk-header__account {