Add styling for correct-answer badge to allow text wrapping

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>
 

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