From 6c20cd6332abc9824a397ce6d82fddb6159c24b7 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Wed, 3 Jun 2026 16:57:20 +0100 Subject: [PATCH 1/4] Reorder and reword abnormality types after SME call --- app/data/abnormality-types.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/data/abnormality-types.js b/app/data/abnormality-types.js index c25f0875..0bdd6742 100644 --- a/app/data/abnormality-types.js +++ b/app/data/abnormality-types.js @@ -1,12 +1,14 @@ // app/data/abnormality-types.js module.exports = [ - 'Architectural distortion', - 'Asymmetric density', - 'Clinical abnormality', - 'Lymph node abnormality', - 'Mass ill-defined', - 'Mass well-defined', + // Order chosen specifically + 'Ill-defined mass', + 'Well-defined mass', 'Microcalcification', + 'Asymmetric density', + 'Architectural distortion', + + // 'Clinical abnormality', + 'Lymph node', 'Other' ] From 93a1964b13b529cf781ef4082fb0d4a474adbb99 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Wed, 3 Jun 2026 16:57:41 +0100 Subject: [PATCH 2/4] Tighten up margins --- app/assets/sass/components/_compact.scss | 4 ++++ app/views/_includes/symptomsWarningCard.njk | 2 +- app/views/reading/workflow/recall-for-assessment-details.html | 2 ++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/assets/sass/components/_compact.scss b/app/assets/sass/components/_compact.scss index be0ae1e7..0da0dddf 100644 --- a/app/assets/sass/components/_compact.scss +++ b/app/assets/sass/components/_compact.scss @@ -299,6 +299,10 @@ margin-bottom: 0; } + .nhsuk-error-summary { + @include nhsuk-responsive-margin(7, "bottom"); + } + .nhsuk-summary-list__key, .nhsuk-summary-list__value, .nhsuk-summary-list__actions { diff --git a/app/views/_includes/symptomsWarningCard.njk b/app/views/_includes/symptomsWarningCard.njk index 1acd90d5..b85b45b6 100644 --- a/app/views/_includes/symptomsWarningCard.njk +++ b/app/views/_includes/symptomsWarningCard.njk @@ -9,6 +9,6 @@ {{ warningCallout({ heading: 'Significant symptoms reported', html: warningCalloutHtml, - classes: "nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-5" + classes: "nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-4" }) }} {% endif %} diff --git a/app/views/reading/workflow/recall-for-assessment-details.html b/app/views/reading/workflow/recall-for-assessment-details.html index 28dcfaea..174eebb6 100644 --- a/app/views/reading/workflow/recall-for-assessment-details.html +++ b/app/views/reading/workflow/recall-for-assessment-details.html @@ -50,6 +50,7 @@ value: "abnormal", text: "Abnormal, recall for assessment" } + ] | removeEmpty } | populateErrors) }} @@ -88,6 +89,7 @@

{{ params.side | sentenceCa heading: Side + " breast", headingLevel: "2", feature: true, + classes: "nhsuk-u-margin-top-3", descriptionHtml: breastDetailsHtml }) }} From 69db1edff7aabe1157cb9a05d902fce00682b93e Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Thu, 4 Jun 2026 10:14:23 +0100 Subject: [PATCH 3/4] Add explanatory comments --- app/data/abnormality-types.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/data/abnormality-types.js b/app/data/abnormality-types.js index 0bdd6742..f9f6dc0a 100644 --- a/app/data/abnormality-types.js +++ b/app/data/abnormality-types.js @@ -1,14 +1,15 @@ // app/data/abnormality-types.js module.exports = [ - // Order chosen specifically + // Features seen in breast tissue, types ordered specifically 'Ill-defined mass', 'Well-defined mass', 'Microcalcification', 'Asymmetric density', 'Architectural distortion', - // 'Clinical abnormality', + // General features / other + // 'Clinical abnormality', // clinical likely not needed as we have a separate option for this 'Lymph node', 'Other' ] From 232596ea53f93be4d4ef8bd2ae510490ede48506 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Thu, 4 Jun 2026 12:39:59 +0100 Subject: [PATCH 4/4] Force 'other' option on to own line and increase conditional size --- app/assets/javascript/option-picker.js | 4 ++-- app/assets/sass/components/_option-picker.scss | 16 ++++++++++++++-- app/views/_components/option-picker/template.njk | 2 ++ app/views/_includes/reading/annotation-form.njk | 4 ++-- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/app/assets/javascript/option-picker.js b/app/assets/javascript/option-picker.js index f90a7ebf..b0c05167 100644 --- a/app/assets/javascript/option-picker.js +++ b/app/assets/javascript/option-picker.js @@ -167,8 +167,8 @@ class OptionPicker { // Dynamically resize inline input based on content, with min/max bounds resizeInput($input) { const hasError = $input.classList.contains('nhsuk-input--error') - const minWidth = hasError ? 120 : 80 - const maxWidth = 220 + const minWidth = hasError ? 180 : 140 // allow space for error icon + const maxWidth = 260 // Use a canvas to measure text width — more reliable than DOM measurement const ctx = document.createElement('canvas').getContext('2d') diff --git a/app/assets/sass/components/_option-picker.scss b/app/assets/sass/components/_option-picker.scss index ab4e2506..b7ddea71 100644 --- a/app/assets/sass/components/_option-picker.scss +++ b/app/assets/sass/components/_option-picker.scss @@ -6,6 +6,9 @@ // app-option-picker--show-dot show a radio circle inside each option // app-option-picker--show-check show a checkbox inside each option // app-option-picker--joined options sit flush with shared/overlapping borders +// +// Item modifiers: +// item.newLine insert a flex break before this item, pushing it to a new row @use "nhsuk-frontend/dist/nhsuk/core" as *; @@ -24,10 +27,11 @@ .app-option-picker__items { display: flex; flex-wrap: wrap; - // Column gap as normal; row gap compensates for the button shadow which eats into vertical space + // Use margin-top on labels (not row-gap) so flex-break spans don't add extra row spacing column-gap: nhsuk-spacing(2); - row-gap: calc(nhsuk-spacing(2) + #{$nhsuk-button-shadow-size}); align-items: stretch; + // Compensate for the margin-top on first-row labels + margin-top: calc(-1 * (nhsuk-spacing(2) + #{$nhsuk-button-shadow-size})); } // The real input is visually hidden but remains keyboard/screen-reader accessible @@ -51,6 +55,14 @@ gap: nhsuk-spacing(2); cursor: pointer; user-select: none; + // Row spacing via margin-top (not row-gap) so flex-break spans don't inherit extra space + margin-top: calc(nhsuk-spacing(2) + #{$nhsuk-button-shadow-size}); +} + +// Invisible full-width element that forces the next item onto a new row +.app-option-picker__flex-break { + flex-basis: 100%; + height: 0; } // ========================================================= diff --git a/app/views/_components/option-picker/template.njk b/app/views/_components/option-picker/template.njk index a79a8c41..7ffd2db3 100644 --- a/app/views/_components/option-picker/template.njk +++ b/app/views/_components/option-picker/template.njk @@ -122,6 +122,8 @@ {%- for attr, val in params.attributes %} {{ attr }}="{{ val }}"{% endfor %} {%- endif %}> {% for item in params.items %} + {#- Insert a flex break before this item if requested -#} + {% if item.newLine %}{% endif %} {#- Determine id for this item -#} {% set itemId = item.id if item.id else idPrefix ~ ("-" ~ loop.index if loop.index > 1 else "") %} diff --git a/app/views/_includes/reading/annotation-form.njk b/app/views/_includes/reading/annotation-form.njk index 94eddd02..2e742b54 100644 --- a/app/views/_includes/reading/annotation-form.njk +++ b/app/views/_includes/reading/annotation-form.njk @@ -53,7 +53,7 @@ items: abnormalityOptions } | populateErrors) }} - Conditional "other details" field — shown via JS when "Other" is selected + {# Conditional "other details" field — shown via JS when "Other" is selected #}
{{ input({ id: _idBase + "otherDetails", @@ -84,7 +84,7 @@ {% set abnormalityItems = [] %} {% for type in data.abnormalityTypes %} {% if type == "Other" %} - {% set abnormalityItems = abnormalityItems | push({ value: type, text: type, conditional: { html: otherDetailsHtml, inline: true } }) %} + {% set abnormalityItems = abnormalityItems | push({ value: type, text: type, conditional: { html: otherDetailsHtml, inline: true }, newLine: true }) %} {% else %} {% set abnormalityItems = abnormalityItems | push({ value: type, text: type }) %} {% endif %}