From 8da1e80fb0868cf6934dd545d7b7097994ce3106 Mon Sep 17 00:00:00 2001
From: pbardy2000 <146740183+pbardy2000@users.noreply.github.com>
Date: Thu, 18 Apr 2024 10:21:18 +0100
Subject: [PATCH] fix(cb2-11068): allow unset as form node width so it never
 hides option text (#1478)

---
 src/app/forms/components/select/select.component.scss    | 4 ++++
 src/app/forms/custom-sections/tyres/tyres.component.html | 2 +-
 src/app/forms/services/dynamic-form.types.ts             | 1 +
 src/app/forms/templates/hgv/hgv-tyres.template.ts        | 2 +-
 src/app/forms/templates/trl/trl-tyres.template.ts        | 6 +++---
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/forms/components/select/select.component.scss b/src/app/forms/components/select/select.component.scss
index 278299d332..31cabccb88 100644
--- a/src/app/forms/components/select/select.component.scss
+++ b/src/app/forms/components/select/select.component.scss
@@ -30,6 +30,10 @@
   min-width: unset;
 }
 
+.govuk-input--width-unset {
+  min-width: unset;
+}
+
 #techRecord_vehicleClass_description-hint {
   max-width: 32rem;
 }
diff --git a/src/app/forms/custom-sections/tyres/tyres.component.html b/src/app/forms/custom-sections/tyres/tyres.component.html
index 2f2dc99c53..51f87ed621 100644
--- a/src/app/forms/custom-sections/tyres/tyres.component.html
+++ b/src/app/forms/custom-sections/tyres/tyres.component.html
@@ -130,7 +130,7 @@
       [type]="types.DROPDOWN"
       name="techRecord_tyreUseCode"
       label="Tyre Use Code"
-      [width]="widths.XS"
+      [width]="widths.UNSET"
       [isEditing]="isEditing"
       [options]="tyreUseCode"
     ></app-switchable-input>
diff --git a/src/app/forms/services/dynamic-form.types.ts b/src/app/forms/services/dynamic-form.types.ts
index dc6357b03f..4f30654ceb 100644
--- a/src/app/forms/services/dynamic-form.types.ts
+++ b/src/app/forms/services/dynamic-form.types.ts
@@ -83,6 +83,7 @@ export enum FormNodeWidth {
   S = 4,
   XS = 3,
   XXS = 2,
+  UNSET = 'unset',
 }
 
 export interface FormNodeOption<T> {
diff --git a/src/app/forms/templates/hgv/hgv-tyres.template.ts b/src/app/forms/templates/hgv/hgv-tyres.template.ts
index 0094da9977..c025cbc04c 100644
--- a/src/app/forms/templates/hgv/hgv-tyres.template.ts
+++ b/src/app/forms/templates/hgv/hgv-tyres.template.ts
@@ -21,7 +21,7 @@ export const tyresTemplateHgv: FormNode = {
       value: null,
       type: FormNodeTypes.CONTROL,
       editType: FormNodeEditTypes.SELECT,
-      width: FormNodeWidth.XS,
+      width: FormNodeWidth.UNSET,
       options: getOptionsFromEnum(TyreUseCode),
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },
diff --git a/src/app/forms/templates/trl/trl-tyres.template.ts b/src/app/forms/templates/trl/trl-tyres.template.ts
index 6d92580cfd..3f4f8715ca 100644
--- a/src/app/forms/templates/trl/trl-tyres.template.ts
+++ b/src/app/forms/templates/trl/trl-tyres.template.ts
@@ -1,10 +1,10 @@
+import { TyreUseCode } from '@dvsa/cvs-type-definitions/types/v3/tech-record/enums/tyreUseCodeTrl.enum.js';
 import { ValidatorNames } from '@forms/models/validators.enum';
 import {
   FormNode, FormNodeEditTypes, FormNodeTypes, FormNodeWidth, TagTypeLabels,
 } from '@forms/services/dynamic-form.types';
-import { TagType } from '@shared/components/tag/tag.component';
 import { getOptionsFromEnum } from '@forms/utils/enum-map';
-import { TyreUseCode } from '@dvsa/cvs-type-definitions/types/v3/tech-record/enums/tyreUseCodeTrl.enum.js';
+import { TagType } from '@shared/components/tag/tag.component';
 
 export const tyresTemplateTrl: FormNode = {
   name: 'tyreSection',
@@ -17,7 +17,7 @@ export const tyresTemplateTrl: FormNode = {
       value: null,
       type: FormNodeTypes.CONTROL,
       editType: FormNodeEditTypes.SELECT,
-      width: FormNodeWidth.XS,
+      width: FormNodeWidth.UNSET,
       options: getOptionsFromEnum(TyreUseCode),
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },