[PRMP-1519] WCAG 1.4.10 reflow - long names do not reflow correctly on view records screen (#591)

* [PRMP-1519] - Fix long name overflow on small screen sizes

* [PRMP-1519] - Fix spacing between givenName and familyName

Author: MohammadIqbalAD-NHS

app/src/components/generic/patientSimpleSummary/PatientSimpleSummary.tsx

@@ -38,7 +38,7 @@ const PatientSimpleSummary = ({ separator = false, showDeceasedTag = false }: Pr
                         data-testid="patient-name"
                         className="nhsuk-u-padding-right-9 nhsuk-u-font-weight-bold"
                     >
-                        {`${patientDetails?.givenName}, ${patientDetails?.familyName}`}
+                        {`${givenName}, ${familyName}`}
                     </span>
 
                     {longname && <br />}

app/src/styles/App.scss

@@ -270,6 +270,12 @@ $hunit: '%';
         &_patient-info {
             p {
                 font-size: 1.2rem;
+                word-break: break-word;
+                overflow-wrap: break-word;
+            }
+            span {
+                overflow-wrap: break-word;
+                word-break: break-word;
             }
         }