From 545db3b57e079ca7f9bb8d777fd111e7783106d9 Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Thu, 25 Jun 2026 15:59:10 +0100
Subject: [PATCH 1/5] Add auto scrolling in reading workflow

---
 app/assets/javascript/reading-scroll.js  | 12 ++++++++++++
 app/assets/sass/components/_reading.scss |  2 ++
 app/views/_templates/layout-reading.html |  5 +++++
 3 files changed, 19 insertions(+)
 create mode 100644 app/assets/javascript/reading-scroll.js

diff --git a/app/assets/javascript/reading-scroll.js b/app/assets/javascript/reading-scroll.js
new file mode 100644
index 00000000..e3ceda4b
--- /dev/null
+++ b/app/assets/javascript/reading-scroll.js
@@ -0,0 +1,12 @@
+// app/assets/javascript/reading-scroll.js
+
+// Reading workflow: scroll the status bar into view on page load.
+// Uses getBoundingClientRect for an exact pixel position rather than
+// scrollIntoView, which can behave oddly near sticky/fixed elements.
+
+document.addEventListener('DOMContentLoaded', () => {
+  const statusBar = document.querySelector('.app-status-bar')
+  if (!statusBar) return
+  const top = statusBar.getBoundingClientRect().top + window.scrollY
+  window.scrollTo({ top, behavior: 'instant' })
+})
diff --git a/app/assets/sass/components/_reading.scss b/app/assets/sass/components/_reading.scss
index 95908317..c8d1a364 100644
--- a/app/assets/sass/components/_reading.scss
+++ b/app/assets/sass/components/_reading.scss
@@ -390,3 +390,5 @@
     padding-top: nhsuk-spacing(4);
   }
 }
+
+
diff --git a/app/views/_templates/layout-reading.html b/app/views/_templates/layout-reading.html
index d73144be..a0d5a2cf 100755
--- a/app/views/_templates/layout-reading.html
+++ b/app/views/_templates/layout-reading.html
@@ -8,6 +8,11 @@
 {# Script to show loading state in PACS viewer when navigating away, and inspect panel (press I) #}
 {% block bodyEnd %}
   {{ super() }}
+
+  {# Fullscreen toggle and auto-scroll to status bar on page load #}
+  {% if isReadingWorkflow %}
+    <script type="module" src="/assets/javascript/reading-scroll.js"></script>
+  {% endif %}
   {% if isReadingWorkflow and participant %}
     <script>
       (function() {

From 1988291d317b87c9b4b3552a9bcc91e90682337d Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Thu, 25 Jun 2026 16:28:42 +0100
Subject: [PATCH 2/5] Compact improvements

---
 app/assets/sass/components/_compact.scss | 5 +++++
 app/views/reading/workflow/opinion.html  | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/app/assets/sass/components/_compact.scss b/app/assets/sass/components/_compact.scss
index 8fe13695..1860fc81 100644
--- a/app/assets/sass/components/_compact.scss
+++ b/app/assets/sass/components/_compact.scss
@@ -209,6 +209,11 @@
     }
   }
 
+  .nhsuk-back-link,
+  .nhsuk-forward-link {
+    @include nhsuk-responsive-margin(3, "top");
+  }
+
   // Reduce spacing after buttons
   .nhsuk-button {
     @include nhsuk-responsive-margin(4, "bottom", $adjustment: $nhsuk-button-shadow-size);
diff --git a/app/views/reading/workflow/opinion.html b/app/views/reading/workflow/opinion.html
index e5e4e659..77c432ae 100644
--- a/app/views/reading/workflow/opinion.html
+++ b/app/views/reading/workflow/opinion.html
@@ -7,6 +7,10 @@
 {% set gridColumn = "none" %}
 {% set showWorkflowNav = true %}
 
+{# Reduce default top padding of main on opinion page to save on scrolling #}
+{% set mainClasses = "nhsuk-u-padding-top-1" %}
+
+
 {% block pageContent %}
 
 

From afa0ab2a397f5a8475ed74797cf2c607e6f5ece2 Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Thu, 25 Jun 2026 16:58:01 +0100
Subject: [PATCH 3/5] More compact tweaks

---
 app/views/_includes/reading/image-warnings.njk | 6 +++---
 app/views/reading/workflow/opinion.html        | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/views/_includes/reading/image-warnings.njk b/app/views/_includes/reading/image-warnings.njk
index c0d3b32b..0e528810 100644
--- a/app/views/_includes/reading/image-warnings.njk
+++ b/app/views/_includes/reading/image-warnings.njk
@@ -27,7 +27,7 @@
   {% endset %}
   {% set warningsHtml %}
     {{ warningsHtml | safe }}
-    <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-2 {{ 'nhsuk-u-margin-top-4' if warningsHtml }}">Additional images</h3>
+    <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-2 {{ 'nhsuk-u-margin-top-0' if warningsHtml }}">Additional images</h3>
     <p>{{ additionalImagesDetail | trim }}</p>
   {% endset %}
 {% endif %}
@@ -73,7 +73,7 @@
 
   {% set warningsHtml %}
     {{ warningsHtml | safe }}
-    <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-2 {{ 'nhsuk-u-margin-top-4' if warningsHtml }}">Not all mammograms taken</h3>
+    <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-2 {{ 'nhsuk-u-margin-top-0' if warningsHtml }}">Not all mammograms taken</h3>
     {{ incompleteDetails | safe }}
   {% endset %}
 {% endif %}
@@ -82,7 +82,7 @@
 {% if event.mammogramData.notesForReader %}
   {% set warningsHtml %}
     {{ warningsHtml | safe }}
-    <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-2 {{ 'nhsuk-u-margin-top-4' if warningsHtml }}">Notes for reader</h3>
+    <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-2 {{ 'nhsuk-u-margin-top-0' if warningsHtml }}">Notes for reader</h3>
     <p>{{ event.mammogramData.notesForReader }}</p>
   {% endset %}
 {% endif %}
diff --git a/app/views/reading/workflow/opinion.html b/app/views/reading/workflow/opinion.html
index 77c432ae..aa32a56f 100644
--- a/app/views/reading/workflow/opinion.html
+++ b/app/views/reading/workflow/opinion.html
@@ -397,6 +397,7 @@ <h2 class="nhsuk-heading-m">{{ questionText }}</h2>
   {{ card({
     heading: "Medical summary",
     headingLevel: "2",
+    classes: "nhsuk-u-margin-top-4",
     feature: true,
     descriptionHtml: medicalSummaryHtml,
     actions: {

From 8d3e1be08e597a49d302d69afbb08c0b541a3547 Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Fri, 26 Jun 2026 13:24:06 +0100
Subject: [PATCH 4/5] Refactor opinion page to make it easier to change layout

---
 app/assets/sass/_misc.scss              |   2 +-
 app/views/reading/workflow/opinion.html | 505 +++++++++++++-----------
 2 files changed, 276 insertions(+), 231 deletions(-)

diff --git a/app/assets/sass/_misc.scss b/app/assets/sass/_misc.scss
index 99acc7dd..bf98e5d9 100644
--- a/app/assets/sass/_misc.scss
+++ b/app/assets/sass/_misc.scss
@@ -80,7 +80,7 @@ body.js-enabled .app-no-js-only {
 // }
 
 .app-page-width--wide .nhsuk-width-container {
-  max-width: 1200px;
+  @include nhsuk-width-container(1200px);
 }
 
 .event-row:focus {
diff --git a/app/views/reading/workflow/opinion.html b/app/views/reading/workflow/opinion.html
index aa32a56f..73bfdc5b 100644
--- a/app/views/reading/workflow/opinion.html
+++ b/app/views/reading/workflow/opinion.html
@@ -6,32 +6,42 @@
 {% set pageHeading = participant | getFullName %}
 {% set gridColumn = "none" %}
 {% set showWorkflowNav = true %}
+{% set bodyClasses = (bodyClasses or "") + " _app-page-width--wide" %}
 
 {# Reduce default top padding of main on opinion page to save on scrolling #}
 {% set mainClasses = "nhsuk-u-padding-top-1" %}
 
+{% set hasSymptoms = event.medicalInformation.symptoms | length > 0 %}
+
 
 {% block pageContent %}
 
+  {# =========================================================
+     Setup: read state
+     ========================================================= #}
 
   {# Get existing read data for this user (saved read) #}
   {% set existingRead = event | getReadForUser %}
   {% set existingOpinion = existingRead.opinion %}
-  
+
   {# Also check for in-progress read in temp data #}
   {% set tempOpinion = data.imageReadingTemp.opinion if data.imageReadingTemp else null %}
-  
+
   {# Show update UI if there's either a saved read or an in-progress one #}
   {% set hasExistingOpinion = existingOpinion or tempOpinion %}
   {% set currentOpinion = tempOpinion or existingOpinion %}
-  
-  {% set hasSymptoms = event.medicalInformation.symptoms | length > 0 %}
 
   {% set opinionHeading = "Review images" %}
   {% if hasExistingOpinion %}
     {% set opinionHeading = "Update review" %}
   {% endif %}
 
+  {% set questionText = "What is your opinion of these images?" %}
+
+  {# =========================================================
+     Setup: mammogram images and view order
+     ========================================================= #}
+
   {# Get mammogram images for thumbnails #}
   {% set mammogramImageSource = data.config.reading.mammogramImageSource or "diagrams" %}
   {% set mammogramImages = getImagesForEvent(eventId, mammogramImageSource, { event: event }) %}
@@ -54,6 +64,226 @@
     ] %}
   {% endif %}
 
+  {# Count total images #}
+  {% set imageCount = 0 %}
+  {% for view in viewOrder %}
+    {% set allPaths = mammogramImages.allPaths[view.key] if mammogramImages and mammogramImages.allPaths else null %}
+    {% if allPaths %}
+      {% if allPaths is string %}
+        {% set imageCount = imageCount + 1 %}
+      {% else %}
+        {% set imageCount = imageCount + allPaths | length %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+
+  {# =========================================================
+     Setup: priors and opinion delay
+     ========================================================= #}
+
+  {% set priorsSummary = event | getPriorsSummary %}
+
+  {# Opinion form data attributes are used to manage the first-load lockout #}
+  {% set opinionDelayEnabled = data.settings.reading.enableOpinionDelay != 'false' %}
+  {% set opinionDelayLocked = 'true' if opinionDelayEnabled and not hasExistingOpinion else 'false' %}
+
+  {# =========================================================
+     HTML content blocks
+     ========================================================= #}
+
+  {# Buttons or radios for giving an opinion #}
+  {% set opinionOptionsHtml %}
+    {% if hasExistingOpinion %}
+      {# Show radios when updating an existing or in-progress opinion #}
+      {{ radios({
+        name: "imageReadingTemp[opinion]",
+        fieldset: {
+          legend: {
+            text: questionText,
+            size: "m",
+            isPageHeading: false
+          }
+        },
+        items: [
+          {
+            value: "normal",
+            html: "Normal <span class='app-shortcut-hint'>(N)</span>",
+            checked: currentOpinion == 'normal' and not existingRead.normalDetails,
+            attributes: { "data-shortcut-radio": "n" }
+          },
+          {
+            value: "normal_with_details",
+            text: "Normal, but add details",
+            checked: (currentOpinion == 'normal' and existingRead.normalDetails) or currentOpinion == 'normal_with_details'
+          },
+          {
+            value: "technical_recall",
+            html: "Technical recall <span class='app-shortcut-hint'>(T)</span>",
+            attributes: { "data-shortcut-radio": "t" }
+          },
+          {
+            value: "recall_for_assessment",
+            html: "Recall for assessment <span class='app-shortcut-hint'>(R)</span>",
+            attributes: { "data-shortcut-radio": "r" }
+          }
+        ],
+        value: currentOpinion
+      }) }}
+
+      {{ button({
+        text: "Update opinion"
+      } | openInModal) }}
+
+    {% else %}
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+          {# Show buttons for initial assessment - vertically stacked #}
+          <h2 class="nhsuk-heading-m">{{ questionText }}</h2>
+
+          <div class="nhsuk-u-margin-bottom-4">
+            {% if hasSymptoms %}
+              {{ button({
+                html: "Normal, and add details <span class='app-shortcut-hint'>(N)</span>",
+                value: "normal_with_details",
+                name: "imageReadingTemp[opinion]",
+                classes: "app-button-full-width nhsuk-u-margin-bottom-3",
+                attributes: { "data-shortcut": "n" }
+              } | openInModal) }}
+            {% else %}
+              {{ button({
+                html: "Normal <span class='app-shortcut-hint'>(N)</span>",
+                value: "normal",
+                name: "imageReadingTemp[opinion]",
+                classes: "app-button-full-width nhsuk-u-margin-bottom-3",
+                attributes: { "data-shortcut": "n" }
+              }) }}
+
+              <p class="nhsuk-u-margin-bottom-4">
+                {# Raw button element intentional — app-button-link styles it as a link,
+                  which doesn't work with the NHS button macro (adds conflicting styles).
+                  data-modal-submit added manually for modal support. #}
+                <button type="submit" name="imageReadingTemp[opinion]" value="normal_with_details" class="app-button-link"{% if data.settings.modalForms == 'true' %} data-modal-submit="true" data-modal-id="app-form-modal"{% endif %}>
+                  Normal, but add details
+                </button>
+              </p>
+            {% endif %}
+          </div>
+
+          <div class="nhsuk-u-margin-bottom-4">
+            {{ button({
+              html: "Technical recall <span class='app-shortcut-hint'>(T)</span>",
+              value: "technical_recall",
+              name: "imageReadingTemp[opinion]",
+              variant: "secondary",
+              classes: "app-button-full-width nhsuk-u-margin-bottom-3",
+              attributes: { "data-shortcut": "t" }
+            } | openInModal) }}
+          </div>
+
+          <div class="nhsuk-u-margin-bottom-0">
+            {{ button({
+              html: "Recall for assessment <span class='app-shortcut-hint'>(R)</span>",
+              value: "recall_for_assessment",
+              name: "imageReadingTemp[opinion]",
+              variant: "warning",
+              classes: "app-button-full-width",
+              attributes: { "data-shortcut": "r" }
+            } | openInModal) }}
+          </div>
+        </div>
+
+      </div>
+
+    {% endif %}
+  {% endset %}
+
+  {# Medical information summary #}
+  {% set medicalSummaryHtml %}
+    {# Only show rows that have data #}
+    {% set showOnlyPopulated = true %}
+    {# No edits allowed in image reading #}
+    {% set allowEdits = false %}
+    {% set medicalSummaryListHtml %}
+      {% include "_includes/summary-lists/medical-info-summary.njk" %}
+    {% endset %}
+
+    {{ card({
+      heading: "Medical summary",
+      headingLevel: "2",
+      classes: "nhsuk-u-margin-top-4",
+      feature: true,
+      descriptionHtml: medicalSummaryListHtml,
+      actions: {
+      items: [
+        {
+          text: "View full medical information",
+          href: "./medical-information",
+          classes: "nhsuk-link--no-visited-state"
+        } | openInModal
+      ]
+    }
+    }) }}
+  {% endset %}
+
+  {# Symptoms warning #}
+  {% set symptomsWarningHtml %}
+    {% set symptoms = event.medicalInformation.symptoms %}
+    {% include "_includes/symptomsWarningCard.njk" %}
+  {% endset %}
+
+  {# Reported mammograms banners #}
+  {% set priorsWarningHtml %}
+    {# Warning: priors reported but not yet requested #}
+    {% if priorsSummary.hasUnrequested %}
+      {% set unrequestedPriors = event.previousMammograms | where("requestStatus", "not_requested") %}
+      {% set unrequestedHtml %}
+        {% for mammogram in unrequestedPriors %}
+          <p class="nhsuk-u-margin-bottom-1">
+            {{ mammogram | summarisePriorMammogram({ unitName: unit.name }) }}
+          </p>
+        {% endfor %}
+        <p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">
+          {{ appLink({ text: "Request priors", href: "./request-priors", classes: "nhsuk-link--no-visited-state" } | openInModal) }}
+        </p>
+      {% endset %}
+
+      {% call insetText({
+        classes: "app-inset-text--compact" if data.settings.compactMode in ["true", true]
+      }) %}
+        <p class="nhsuk-u-font-weight-bold nhsuk-u-margin-bottom-1">Recent mammograms reported</p>
+        {{ unrequestedHtml | safe }}
+      {% endcall %}
+    {% endif %}
+
+    {# Info: received priors #}
+    {% if priorsSummary.counts.received > 0 %}
+      {% set receivedMammograms = event.previousMammograms | where("requestStatus", "received") %}
+      {% set receivedHtml %}
+        {% for mammogram in receivedMammograms %}
+          <p class="nhsuk-u-margin-bottom-1">
+            {{ mammogram | summarisePriorMammogram({ unitName: unit.name }) }}
+            {% if mammogram.requestedBy %}
+              – requested by {{ mammogram.requestedBy | getUsername({ format: "short", identifyCurrentUser: true }) }}{% if mammogram.requestReason %}: {{ mammogram.requestReason }}{% endif %}
+            {% elseif mammogram.requestReason %}
+              – {{ mammogram.requestReason }}
+            {% endif %}
+          </p>
+        {% endfor %}
+      {% endset %}
+
+      {% call insetText({
+        classes: "app-inset-text--compact" if data.settings.compactMode in ["true", true]
+      }) %}
+        <p class="nhsuk-u-font-weight-bold nhsuk-u-margin-bottom-1">Priors received</p>
+        {{ receivedHtml | safe }}
+      {% endcall %}
+    {% endif %}
+  {% endset %}
+
+  {# =========================================================
+     Page layout
+     ========================================================= #}
+
   {# Page header with status tags #}
   <div class="nhsuk-grid-row app-header-with-status">
     <div class="nhsuk-grid-column-two-thirds">
@@ -100,7 +330,6 @@ <h1 class="nhsuk-heading-l js-image-count">
       {% endif %}
 
       {# Prior mammogram status tags #}
-      {% set priorsSummary = event | getPriorsSummary %}
       {% if priorsSummary.total > 0 %}
         {% if priorsSummary.hasAwaiting %}
           {% set awaitingPriorsList = event | getAwaitingPriors %}
@@ -134,115 +363,47 @@ <h1 class="nhsuk-heading-l js-image-count">
     </div>
   </div>
 
-  {# Symptoms warning #}
-  <div class="nhsuk-grid-row">
-    <div class="nhsuk-grid-column-full">
-      {% set symptoms = event.medicalInformation.symptoms %}
-      {% include "symptomsWarningCard.njk" %}
-    </div>
-  </div>
-
-  {# Reported mammograms banners - shown if there are unrequested or received priors #}
-  {% set priorsSummary = event | getPriorsSummary %}
-
-  {# Warning: priors reported but not yet requested #}
-  {% if priorsSummary.hasUnrequested %}
-    <div class="nhsuk-grid-row">
-      <div class="nhsuk-grid-column-full">
-        {% set unrequestedPriors = event.previousMammograms | where("requestStatus", "not_requested") %}
-        {% set unrequestedHtml %}
-          {% for mammogram in unrequestedPriors %}
-            <p class="nhsuk-u-margin-bottom-1">
-              {{ mammogram | summarisePriorMammogram({ unitName: unit.name }) }}
-            </p>
-          {% endfor %}
-          <p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">
-            {{ appLink({ text: "Request priors", href: "./request-priors", classes: "nhsuk-link--no-visited-state" } | openInModal) }}
-          </p>
-        {% endset %}
-
-        {% call insetText({
-          classes: "app-inset-text--compact" if data.settings.compactMode in ["true", true]
-        }) %}
-          <p class="nhsuk-u-font-weight-bold nhsuk-u-margin-bottom-1">Recent mammograms reported</p>
-          {{ unrequestedHtml | safe }}
-        {% endcall %}
-      </div>
-    </div>
-  {% endif %}
-
-  {# Info: received priors #}
-  {% if priorsSummary.counts.received > 0 %}
-    {% set receivedMammograms = event.previousMammograms | where("requestStatus", "received") %}
-    <div class="nhsuk-grid-row">
-      <div class="nhsuk-grid-column-full">
-        {% set receivedHtml %}
-          {% for mammogram in receivedMammograms %}
-            <p class="nhsuk-u-margin-bottom-1">
-              {{ mammogram | summarisePriorMammogram({ unitName: unit.name }) }}
-              {% if mammogram.requestedBy %}
-                – requested by {{ mammogram.requestedBy | getUsername({ format: "short", identifyCurrentUser: true }) }}{% if mammogram.requestReason %}: {{ mammogram.requestReason }}{% endif %}
-              {% elseif mammogram.requestReason %}
-                – {{ mammogram.requestReason }}
-              {% endif %}
-            </p>
-          {% endfor %}
-        {% endset %}
-
-        {% call insetText({
-          classes: "app-inset-text--compact" if data.settings.compactMode in ["true", true]
-        }) %}
-          <p class="nhsuk-u-font-weight-bold nhsuk-u-margin-bottom-1">Priors received</p>
-          {{ receivedHtml | safe }}
-        {% endcall %}
-
-      </div>
-    </div>
-  {% endif %}
-
   {# Opinion form with thumbnails #}
-  {% set questionText = "What is your opinion of these images?" %}
-
-  {# Count total images #}
-  {% set imageCount = 0 %}
-  {% for view in viewOrder %}
-    {% set allPaths = mammogramImages.allPaths[view.key] if mammogramImages and mammogramImages.allPaths else null %}
-    {% if allPaths %}
-      {% if allPaths is string %}
-        {% set imageCount = imageCount + 1 %}
-      {% else %}
-        {% set imageCount = imageCount + allPaths | length %}
-      {% endif %}
-    {% endif %}
-  {% endfor %}
-
-  {# Opinion form data attributes are used to manage the first-load lockout #}
   {# Todo: do we need a form here? is the parent layout's form not enough? #}
-  {% set opinionDelayEnabled = data.settings.reading.enableOpinionDelay != 'false' %}
-  {% set opinionDelayLocked = 'true' if opinionDelayEnabled and not hasExistingOpinion else 'false' %}
   <form action="./opinion-answer" method="POST" class="app-reading-opinion" data-reading-opinion-form="true" data-reading-opinion-locked="{{ opinionDelayLocked }}" data-event-id="{{ event.id }}" data-session-id="{{ session.id if session }}">
 
     {# Hidden field to track previous opinion for opinion change detection #}
     <input type="hidden" name="imageReadingTemp[previousOpinion]" value="{{ currentOpinion }}">
 
+    {# Symptoms warning and priors banners - full width, only if content exists #}
+    {% if (symptomsWarningHtml | trim) or (priorsWarningHtml | trim) %}
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+          {% if symptomsWarningHtml | trim %}
+            {{ symptomsWarningHtml | safe }}
+          {% endif %}
+
+          {% if priorsWarningHtml | trim %}
+            {{ priorsWarningHtml | safe }}
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+
+    {# Opinion and thumbnails #}
     <div class="nhsuk-grid-row">
 
-      {# Left column: Mammogram thumbnails #}
-      <div class="nhsuk-grid-column-one-third nhsuk-u-margin-bottom-4">
+      {# Mammogram thumbnails #}
+      <div class="nhsuk-grid-column-one-third">
         <h2 class="nhsuk-heading-s">Image thumbnails ({{ imageCount }})</h2>
-        <div class="app-mammogram-thumbnails">
+        <div class="app-mammogram-thumbnails nhsuk-u-margin-bottom-4">
           {% for view in viewOrder %}
             <div class="app-mammogram-thumbnail app-mammogram-thumbnail--{{ view.side }}">
               {% set allPaths = mammogramImages.allPaths[view.key] if mammogramImages and mammogramImages.allPaths else null %}
-              
+
               {% if allPaths %}
                 {# Handle both single path (string) and multiple paths (array) #}
                 {% if allPaths is string %}
                   <div class="app-mammogram-thumbnail__image-wrapper">
                     <span class="app-mammogram-thumbnail__label">{{ view.label }}</span>
-                    <img 
-                      class="app-mammogram-thumbnail__image{% if mammogramImageSource == 'diagrams' %} app-mammogram-thumbnail__image--diagram{% endif %}" 
-                      src="{{ allPaths }}" 
+                    <img
+                      class="app-mammogram-thumbnail__image{% if mammogramImageSource == 'diagrams' %} app-mammogram-thumbnail__image--diagram{% endif %}"
+                      src="{{ allPaths }}"
                       alt="{{ view.label }} view"
                       data-view="{{ view.label }}"
                     >
@@ -252,9 +413,9 @@ <h2 class="nhsuk-heading-s">Image thumbnails ({{ imageCount }})</h2>
                   {% for imagePath in allPaths %}
                     <div class="app-mammogram-thumbnail__image-wrapper">
                       <span class="app-mammogram-thumbnail__label">{{ view.label }}</span>
-                      <img 
-                        class="app-mammogram-thumbnail__image{% if mammogramImageSource == 'diagrams' %} app-mammogram-thumbnail__image--diagram{% endif %}" 
-                        src="{{ imagePath }}" 
+                      <img
+                        class="app-mammogram-thumbnail__image{% if mammogramImageSource == 'diagrams' %} app-mammogram-thumbnail__image--diagram{% endif %}"
+                        src="{{ imagePath }}"
                         alt="{{ view.label }} view ({{ loop.index }} of {{ loop.length }})"
                         data-view="{{ view.label }}"
                       >
@@ -275,150 +436,34 @@ <h2 class="nhsuk-heading-s">Image thumbnails ({{ imageCount }})</h2>
         </div>
       </div>
 
-      {# Right column: Opinion buttons/radios #}
+      {# Opinion buttons/radios #}
       <div class="nhsuk-grid-column-two-thirds">
-        {% if hasExistingOpinion %}
-          {# Show radios when updating an existing or in-progress opinion #}
-          {{ radios({
-            name: "imageReadingTemp[opinion]",
-            fieldset: {
-              legend: {
-                text: questionText,
-                size: "m",
-                isPageHeading: false
-              }
-            },
-            items: [
-              {
-                value: "normal",
-                html: "Normal <span class='app-shortcut-hint'>(N)</span>",
-                checked: currentOpinion == 'normal' and not existingRead.normalDetails,
-                attributes: { "data-shortcut-radio": "n" }
-              },
-              {
-                value: "normal_with_details",
-                text: "Normal, but add details",
-                checked: (currentOpinion == 'normal' and existingRead.normalDetails) or currentOpinion == 'normal_with_details'
-              },
-              {
-                value: "technical_recall",
-                html: "Technical recall <span class='app-shortcut-hint'>(T)</span>",
-                attributes: { "data-shortcut-radio": "t" }
-              },
-              {
-                value: "recall_for_assessment",
-                html: "Recall for assessment <span class='app-shortcut-hint'>(R)</span>",
-                attributes: { "data-shortcut-radio": "r" }
-              }
-            ],
-            value: currentOpinion
-          }) }}
-
-          {{ button({
-            text: "Update opinion"
-          } | openInModal) }}
+        {{ opinionOptionsHtml | safe }}
+      </div>
 
-        {% else %}
-          {# Show buttons for initial assessment - vertically stacked #}
-          <h2 class="nhsuk-heading-m">{{ questionText }}</h2>
+    </div>
 
-          <div class="nhsuk-u-margin-bottom-4">
-            {% if hasSymptoms %}
-              {{ button({
-                html: "Normal, and add details <span class='app-shortcut-hint'>(N)</span>",
-                value: "normal_with_details",
-                name: "imageReadingTemp[opinion]",
-                classes: "app-button-full-width nhsuk-u-margin-bottom-3",
-                attributes: { "data-shortcut": "n" }
-              } | openInModal) }}
-            {% else %}
-              {{ button({
-                html: "Normal <span class='app-shortcut-hint'>(N)</span>",
-                value: "normal",
-                name: "imageReadingTemp[opinion]",
-                classes: "app-button-full-width nhsuk-u-margin-bottom-3",
-                attributes: { "data-shortcut": "n" }
-              }) }}
+    {# Image notes, medical summary and defer - full width #}
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-full">
 
-              <p class="nhsuk-u-margin-bottom-4">
-                {# Raw button element intentional — app-button-link styles it as a link,
-                   which doesn't work with the NHS button macro (adds conflicting styles).
-                   data-modal-submit added manually for modal support. #}
-                <button type="submit" name="imageReadingTemp[opinion]" value="normal_with_details" class="app-button-link"{% if data.settings.modalForms == 'true' %} data-modal-submit="true" data-modal-id="app-form-modal"{% endif %}>
-                  Normal, but add details
-                </button>
-              </p>
-            {% endif %}
-          </div>
+        {# Image notes #}
+        {% include "_includes/reading/image-warnings.njk" %}
 
-          <div class="nhsuk-u-margin-bottom-4">
-            {{ button({
-              html: "Technical recall <span class='app-shortcut-hint'>(T)</span>",
-              value: "technical_recall",
-              name: "imageReadingTemp[opinion]",
-              variant: "secondary",
-              classes: "app-button-full-width nhsuk-u-margin-bottom-3",
-              attributes: { "data-shortcut": "t" }
-            } | openInModal) }}
-          </div>
+        {# Medical information summary #}
+        {{ medicalSummaryHtml | safe }}
 
-          <div class="nhsuk-u-margin-bottom-4">
-            {{ button({
-              html: "Recall for assessment <span class='app-shortcut-hint'>(R)</span>",
-              value: "recall_for_assessment",
-              name: "imageReadingTemp[opinion]",
-              variant: "warning",
-              classes: "app-button-full-width",
-              attributes: { "data-shortcut": "r" }
-            } | openInModal) }}
-          </div>
+        {# Defer case option #}
+        <p class="nhsuk-u-margin-top-2">
+          {{ appLink({ text: "Defer this case", href: "./defer-case", classes: "nhsuk-link--no-visited-state" } | openInModal) }}
+        </p>
 
-        {% endif %}
       </div>
     </div>
 
   </form>
 
-  {# Image notes - moved above opinion section #}
-  {% include "_includes/reading/image-warnings.njk" %}
-
-
-  {# Medical summary #}
-  {# Only show rows that have data #}
-  {% set showOnlyPopulated = true %}
-  {# No edits allowed in image reading #}
-
-  {% set allowEdits = false %}
 
-  {% set medicalSummaryHtml %}
-    {% include "_includes/summary-lists/medical-info-summary.njk" %}
-  {% endset %}
-
-  {{ card({
-    heading: "Medical summary",
-    headingLevel: "2",
-    classes: "nhsuk-u-margin-top-4",
-    feature: true,
-    descriptionHtml: medicalSummaryHtml,
-    actions: {
-    items: [
-      {
-        text: "View full medical information",
-        href: "./medical-information",
-        classes: "nhsuk-link--no-visited-state"
-      } | openInModal
-    ]
-  }
-  }) }}
-
-  {# Defer case option #}
-  <div class="nhsuk-grid-row">
-    <div class="nhsuk-grid-column-full">
-      <p class="nhsuk-u-margin-top-2">
-        {{ appLink({ text: "Defer this case", href: "./defer-case", classes: "nhsuk-link--no-visited-state" } | openInModal) }}
-      </p>
-    </div>
-  </div>
 
 {% endblock %}
 

From 8bb1ff33fada4c3dffa9810f38e18086d6ccad02 Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Fri, 26 Jun 2026 13:30:53 +0100
Subject: [PATCH 5/5] Fix for placeholder sizes

---
 app/assets/javascript/image-streaming.js | 69 ++++++++++++++++--------
 1 file changed, 47 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascript/image-streaming.js b/app/assets/javascript/image-streaming.js
index a26bde24..844594dc 100644
--- a/app/assets/javascript/image-streaming.js
+++ b/app/assets/javascript/image-streaming.js
@@ -12,12 +12,18 @@ if (configEl) {
     console.warn('image-streaming: could not parse config', e)
   }
 
-  if (config && config.enabled && !config.alreadyReceived && config.images && config.images.length) {
+  if (
+    config &&
+    config.enabled &&
+    !config.alreadyReceived &&
+    config.images &&
+    config.images.length
+  ) {
     initStreaming(config)
   }
 }
 
-function initStreaming (config) {
+function initStreaming(config) {
   const { intervalMs = 3000, images = [], totalImages = images.length } = config
 
   // Find all view slots rendered by mammogram-image-display.njk
@@ -26,7 +32,7 @@ function initStreaming (config) {
 
   // Build a map of view code → { el, revealedCount }
   const slotMap = {}
-  slots.forEach(slot => {
+  slots.forEach((slot) => {
     const view = slot.dataset.view
     if (view) {
       slotMap[view] = { el: slot, revealedCount: 0 }
@@ -34,7 +40,7 @@ function initStreaming (config) {
   })
 
   // Set all slots to awaiting state before any images arrive
-  slots.forEach(slot => setSlotAwaiting(slot))
+  slots.forEach((slot) => setSlotAwaiting(slot))
 
   // Counter element in the inset text
   const countEl = document.getElementById('streaming-received-count')
@@ -68,7 +74,7 @@ function initStreaming (config) {
   scheduleNext()
 
   // Right arrow key immediately advances to the next image (useful for demos)
-  document.addEventListener('keydown', e => {
+  document.addEventListener('keydown', (e) => {
     if (e.key !== 'ArrowRight') return
     if (e.target.matches('input, textarea, select')) return
     if (timer) {
@@ -82,8 +88,10 @@ function initStreaming (config) {
 
 // Replace a slot's content with a placeholder, collapsing to a single wrapper.
 // Uses the existing missing-image markup so styles and sizing are consistent.
-function setSlotAwaiting (slot) {
-  const wrappers = slot.querySelectorAll('.app-mammogram-thumbnail__image-wrapper')
+function setSlotAwaiting(slot) {
+  const wrappers = slot.querySelectorAll(
+    '.app-mammogram-thumbnail__image-wrapper'
+  )
   if (!wrappers.length) return
 
   const firstWrapper = wrappers[0]
@@ -95,12 +103,17 @@ function setSlotAwaiting (slot) {
 
   // Capture label text before replacing inner content
   const labelEl = firstWrapper.querySelector('.app-mammogram-thumbnail__label')
-  const labelText = labelEl ? labelEl.textContent.trim() : (slot.dataset.view || '')
-
-  // Set an explicit width so the wrapper doesn't collapse when there's no image content.
-  // (width: 100% on the wrapper resolves to 0 when the flex parent has no intrinsic width)
-  const isLarge = firstWrapper.classList.contains('app-mammogram-thumbnail__image-wrapper--large')
-  firstWrapper.style.width = isLarge ? '200px' : '120px'
+  const labelText = labelEl
+    ? labelEl.textContent.trim()
+    : slot.dataset.view || ''
+
+  // Give the slot a preferred width so the wrapper's width: 100% can resolve.
+  // Keep max-width at 100% so placeholders still shrink on smaller screens.
+  const isLarge = firstWrapper.classList.contains(
+    'app-mammogram-thumbnail__image-wrapper--large'
+  )
+  slot.style.width = isLarge ? '200px' : '120px'
+  slot.style.maxWidth = '100%'
 
   // Show a spinner on every placeholder from the start — images may load too fast
   // for a spinner added only at reveal time to be visible
@@ -113,7 +126,7 @@ function setSlotAwaiting (slot) {
 
 // Reveal an image in the appropriate slot.
 // immediate=true skips the spinner delay (used for the first image, already received).
-function revealImage (imageData, slotMap, immediate = false) {
+function revealImage(imageData, slotMap, immediate = false) {
   const slotInfo = slotMap[imageData.view]
   if (!slotInfo) return
 
@@ -121,7 +134,9 @@ function revealImage (imageData, slotMap, immediate = false) {
 
   if (slotInfo.revealedCount === 0) {
     // First image for this view — replace placeholder content in the existing wrapper
-    const wrapper = slot.querySelector('.app-mammogram-thumbnail__image-wrapper')
+    const wrapper = slot.querySelector(
+      '.app-mammogram-thumbnail__image-wrapper'
+    )
     if (!wrapper) return
 
     // Re-read the label before wiping innerHTML
@@ -132,11 +147,13 @@ function revealImage (imageData, slotMap, immediate = false) {
     // Skip the spinner for the first image (already received when we arrived on this page).
     const showImage = () => {
       wrapper.innerHTML = `<span class="app-mammogram-thumbnail__label">${labelText}</span>`
-      // Reset the explicit width we set in setSlotAwaiting
-      wrapper.style.width = ''
+      // Reset placeholder-only sizing once a real image is shown.
+      slot.style.width = ''
+      slot.style.maxWidth = ''
 
       const img = document.createElement('img')
-      img.className = 'app-mammogram-thumbnail__image app-mammogram-thumbnail__image--diagram'
+      img.className =
+        'app-mammogram-thumbnail__image app-mammogram-thumbnail__image--diagram'
       img.src = imageData.src
       img.alt = `${imageData.view} view`
       wrapper.appendChild(img)
@@ -154,11 +171,18 @@ function revealImage (imageData, slotMap, immediate = false) {
     }
   } else {
     // Additional image for this view (repeat or extra) — append a new wrapper
-    const existingWrapper = slot.querySelector('.app-mammogram-thumbnail__image-wrapper')
-    const isLarge = existingWrapper && existingWrapper.classList.contains('app-mammogram-thumbnail__image-wrapper--large')
+    const existingWrapper = slot.querySelector(
+      '.app-mammogram-thumbnail__image-wrapper'
+    )
+    const isLarge =
+      existingWrapper &&
+      existingWrapper.classList.contains(
+        'app-mammogram-thumbnail__image-wrapper--large'
+      )
 
     const newWrapper = document.createElement('div')
-    newWrapper.className = 'app-mammogram-thumbnail__image-wrapper' +
+    newWrapper.className =
+      'app-mammogram-thumbnail__image-wrapper' +
       (isLarge ? ' app-mammogram-thumbnail__image-wrapper--large' : '')
 
     const label = document.createElement('span')
@@ -166,7 +190,8 @@ function revealImage (imageData, slotMap, immediate = false) {
     label.textContent = slot.dataset.view
 
     const img = document.createElement('img')
-    img.className = 'app-mammogram-thumbnail__image app-mammogram-thumbnail__image--diagram'
+    img.className =
+      'app-mammogram-thumbnail__image app-mammogram-thumbnail__image--diagram'
     img.src = imageData.src
     img.alt = `${imageData.view} view`