feat(cb2-11185): ensure correct text-wrapping. (#1473)

* fix(cb2-11185): break text to avoid long strings causing the page to overflow horizontally

* fix(cb2-11185): break long strings to overflow, but not mid-word unless necessary

* fix(cb2-11185): fix linting

src/app/forms/components/view-list-item/view-list-item.component.html

@@ -3,15 +3,15 @@
 
   <ng-container [ngSwitch]="viewType">
     <ng-container *ngSwitchCase="formNodeViewTypes.DATE">
-      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}</td>
+      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date: 'dd/MM/yyyy' | defaultNullOrEmpty }}</td>
     </ng-container>
 
     <ng-container *ngSwitchCase="formNodeViewTypes.DATETIME">
-      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date : 'dd/MM/yyyy HH:mm' | defaultNullOrEmpty }}</td>
+      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date: 'dd/MM/yyyy HH:mm' | defaultNullOrEmpty }}</td>
     </ng-container>
 
     <ng-container *ngSwitchCase="formNodeViewTypes.TIME">
-      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date : 'HH:mm' | defaultNullOrEmpty }}</td>
+      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date: 'HH:mm' | defaultNullOrEmpty }}</td>
     </ng-container>
 
     <ng-container *ngSwitchCase="formNodeViewTypes.VRM">
@@ -29,8 +29,8 @@
     </ng-container>
 
     <ng-container *ngSwitchDefault>
-      <td [id]="customId ? 'test-' + customId : 'test-' + name" class="govuk-table__cell">
-        {{ value | refDataDecode$ : control?.meta?.referenceData | async | getControlLabel : control?.meta?.options | defaultNullOrEmpty }}
+      <td [id]="customId ? 'test-' + customId : 'test-' + name" class="govuk-table__cell break-all">
+        {{ value | refDataDecode$: control?.meta?.referenceData | async | getControlLabel: control?.meta?.options | defaultNullOrEmpty }}
       </td>
     </ng-container>
   </ng-container>

src/app/forms/components/view-list-item/view-list-item.component.scss

@@ -12,4 +12,8 @@
 
 .w-0 {
     width: 1px;
+}
+
+.break-all {
+    overflow-wrap: anywhere;
 }

src/app/forms/custom-sections/adr-new-certificate-required-view/adr-new-certificate-required-view.component.spec.ts

@@ -4,9 +4,9 @@ import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { CustomFormControl, FormNodeTypes } from '@forms/services/dynamic-form.types';
 import { provideMockStore } from '@ngrx/store/testing';
 import { State, initialAppState } from '@store/index';
+import { SharedModule } from '@shared/shared.module';
 import { AdrTankDetailsM145ViewComponent } from '../adr-tank-details-m145-view/adr-tank-details-m145-view.component';
 import { AdrNewCertificateRequiredViewComponent } from './adr-new-certificate-required-view.component';
-import { SharedModule } from '@shared/shared.module';
 
 describe('AdrNewCertificateRequiredViewComponent', () => {
   let component: AdrNewCertificateRequiredViewComponent;