From b79d95cd70fb9c84f393c635503d47961cbfc82d Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Tue, 11 Nov 2025 13:03:44 +0000
Subject: [PATCH] Refactor layout of marked answers section for improved
 responsiveness; update column classes for better display on various screen
 sizes.

---
 .../partials/mark2_question_marked_fragment.html      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/anatomy/templates/anatomy/partials/mark2_question_marked_fragment.html b/anatomy/templates/anatomy/partials/mark2_question_marked_fragment.html
index b7669f2a..a235f890 100644
--- a/anatomy/templates/anatomy/partials/mark2_question_marked_fragment.html
+++ b/anatomy/templates/anatomy/partials/mark2_question_marked_fragment.html
@@ -2,8 +2,13 @@
 <div class="card mt-2">
   <div class="card-body">
     <h6 class="card-title">All stored answers for this question</h6>
+    <style>
+      /* Allow stored answers to wrap long lines and break words so they are visible
+         in narrow columns. Also ensure the lists stack on small screens. */
+      .card .list-group-item pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
+    </style>
     <div class="row">
-      <div class="col-md-4">
+      <div class="col-12 col-lg-4">
         <h6>2 marks</h6>
         <ul class="list-group mb-2">
           {% for answer in correct_answers %}
@@ -13,7 +18,7 @@
           {% endfor %}
         </ul>
       </div>
-      <div class="col-md-4">
+  <div class="col-12 col-lg-4">
         <h6>1 mark</h6>
         <ul class="list-group mb-2">
           {% for answer in half_mark_answers %}
@@ -23,7 +28,7 @@
           {% endfor %}
         </ul>
       </div>
-      <div class="col-md-4">
+  <div class="col-12 col-lg-4">
         <h6>0 marks</h6>
         <ul class="list-group mb-2">
           {% for answer in incorrect_answers %}