From 3626f3918e4af0b5aad5b3f5a6de92f750e2e5db Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Mon, 9 Feb 2026 22:50:40 +0000
Subject: [PATCH] Enhance image annotation help text and layout in question
 detail view

---
 anatomy/templates/anatomy/anatomyquestion_form.html | 4 ++++
 anatomy/templates/anatomy/question_detail.html      | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/anatomy/templates/anatomy/anatomyquestion_form.html b/anatomy/templates/anatomy/anatomyquestion_form.html
index 17b5fc36..a0681d38 100644
--- a/anatomy/templates/anatomy/anatomyquestion_form.html
+++ b/anatomy/templates/anatomy/anatomyquestion_form.html
@@ -233,6 +233,10 @@
         <p>Question type can be selected from a predefined list. If you require a more please contact ross.kruger@nhs.net.</p>
 
         <p>Correct and incorrect answers can be defined once the question has been created.</p>
+
+        <p>Images can be selected either directly via the browse button or by dragging and dropping them into the designated area below.</p>
+
+        <p>Supported formats include JPEG, PNG, and GIF. It is also possible to use DICOM images.</p>
     {% endhelp %}
     <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
         {% csrf_token %}
diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html
index fb259e27..8c0ec686 100644
--- a/anatomy/templates/anatomy/question_detail.html
+++ b/anatomy/templates/anatomy/question_detail.html
@@ -10,10 +10,10 @@
                 <div class="card-body">
                     <div id="anatomy-dicom-image" class="dicom-image-legacy w-100" data-url="{{ question.get_image_url }}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true style="min-height:300px">
                     </div>
-                    <div class="mt-3 d-flex justify-content-between align-items-center">
-                        <details class="mb-0">
-                            <summary class="small text-muted"><i class="bi bi-info-circle"></i> Image help</summary>
-                            <div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist.</div>
+                    <div class="mt-3 d-flex justify-content-between align-items-start">
+                        <details class="mb-0 flex-grow-1 me-2">
+                            <summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
+                            <div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist. If required use the middle button to zoom and the left button to pan.</div>
                         </details>
 
                         <button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button>