From 4f72de6be9578ad791db8cd6f7e278682d1c0969 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Sun, 26 Oct 2025 21:08:19 +0000
Subject: [PATCH] Add styling for correct-answer badge to allow text wrapping

---
 sbas/templates/sbas/question_detail.html | 2 +-
 templates/base.html                      | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/sbas/templates/sbas/question_detail.html b/sbas/templates/sbas/question_detail.html
index 456b3b68..0b3013bc 100644
--- a/sbas/templates/sbas/question_detail.html
+++ b/sbas/templates/sbas/question_detail.html
@@ -90,7 +90,7 @@
                                     {% if question.e_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.e_feedback|safe }}</em></div>{% endif %}
                                 </li>
                             </ol>
-                            <div class="mt-2">Correct: <span class="badge bg-success text-white fs-5 py-2 px-3 rounded-pill">{{ question.get_correct_answer_stripped }}</span></div>
+                            <div class="mt-2">Correct: <span class="badge bg-success text-white fs-5 py-2 px-3 rounded-pill correct-badge">{{ question.get_correct_answer_stripped }}</span></div>
                         {% endautoescape %}
                     </div>
 
diff --git a/templates/base.html b/templates/base.html
index 080cf292..79085138 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -85,6 +85,13 @@
             .dropdown-item {
                 color: lightblue;
             }
+            /* Allow the correct-answer badge to wrap if the text is long */
+            .correct-badge {
+                white-space: normal !important;
+                display: inline-block;
+                word-break: break-word;
+                max-width: 100%;
+            }
         </style>
         {% block css %}
         {% endblock %}