Update annotation form following SME call

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')

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 {

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;
 }
 
 // =========================================================

app/data/abnormality-types.js

@@ -1,12 +1,15 @@
 // app/data/abnormality-types.js
 
 module.exports = [
-  'Architectural distortion',
-  'Asymmetric density',
-  'Clinical abnormality',
-  'Lymph node abnormality',
-  'Mass ill-defined',
-  'Mass well-defined',
+  // Features seen in breast tissue, types ordered specifically
+  'Ill-defined mass',
+  'Well-defined mass',
   'Microcalcification',
+  'Asymmetric density',
+  'Architectural distortion',
+
+  // General features / other
+  // 'Clinical abnormality', // clinical likely not needed as we have a separate option for this
+  'Lymph node',
   'Other'
 ]

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 %}<span class="app-option-picker__flex-break" aria-hidden="true"></span>{% endif %}
     {#- Determine id for this item -#}
     {% set itemId = item.id if item.id else idPrefix ~ ("-" ~ loop.index if loop.index > 1 else "") %}
 

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 #}
   <div id="{{ _idBase }}other-details-wrapper" class="{{ 'nhsuk-u-visually-hidden' if annotationTemp.abnormalityType != 'Other' }}">
     {{ 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 %}

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 %}

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 @@ <h3 class="nhsuk-heading-xs nhsuk-u-margin-bottom-2">{{ params.side | sentenceCa
     heading: Side + " breast",
     headingLevel: "2",
     feature: true,
+    classes: "nhsuk-u-margin-top-3",
     descriptionHtml: breastDetailsHtml
   }) }}