feat: Responsive UI Header (#1792)

* feat: responsive UI

* chore: removed comments

* fix: starting whitespace characters fix

Author: Warren-Pitterson

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<HTMLFormElement>) => {
     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 (
-    <search className="nhsuk-header__search">
-      <form
-        className="nhsuk-header__search-form"
-        id="search"
-        onSubmit={handleSubmit}
-      >
+    <form
+      className="nhsuk-header__search-form"
+      id="search"
+      onSubmit={handleSubmit}
+    >
         <label className="nhsuk-u-visually-hidden" htmlFor="search-field">
           Search by NHS number
         </label>
@@ -74,6 +73,5 @@ export function SearchNhsNumber() {
           </svg>
         </button>
       </form>
-    </search>
   );
 }

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 {