From 921cc53667296771f1c87b41c67eca605c0a450d Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 10 Nov 2025 10:01:58 +0000
Subject: [PATCH] Refactor exam review question summary layout for improved
 alignment and text wrapping

---
 ...exam_review_question_summary_fragment.html | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html b/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html
index 58f8bbfa..1804d142 100644
--- a/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html
+++ b/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html
@@ -19,10 +19,10 @@
             {# Choice A #}
             <div class="list-group-item">
                 <div class="d-flex w-100 justify-content-between align-items-center">
-                    <div>
-                        <div class="fw-bold">A</div>
+                    <div class="d-flex align-items-center">
+                        <div class="fw-bold me-3">A</div>
                         {% if exam_response_texts.a %}
-                            <div class="small text-muted">{{ exam_response_texts.a|safe }}</div>
+                            <div class="small text-muted text-wrap">{{ exam_response_texts.a|safe }}</div>
                         {% endif %}
                     </div>
                     <div class="text-end">
@@ -40,10 +40,10 @@
             {# Choice B #}
             <div class="list-group-item">
                 <div class="d-flex w-100 justify-content-between align-items-center">
-                    <div>
-                        <div class="fw-bold">B</div>
+                    <div class="d-flex align-items-center">
+                        <div class="fw-bold me-3">B</div>
                         {% if exam_response_texts.b %}
-                            <div class="small text-muted">{{ exam_response_texts.b|safe }}</div>
+                            <div class="small text-muted text-wrap">{{ exam_response_texts.b|safe }}</div>
                         {% endif %}
                     </div>
                     <div class="text-end">
@@ -61,10 +61,10 @@
             {# Choice C #}
             <div class="list-group-item">
                 <div class="d-flex w-100 justify-content-between align-items-center">
-                    <div>
-                        <div class="fw-bold">C</div>
+                    <div class="d-flex align-items-center">
+                        <div class="fw-bold me-3">C</div>
                         {% if exam_response_texts.c %}
-                            <div class="small text-muted">{{ exam_response_texts.c|safe }}</div>
+                            <div class="small text-muted text-wrap">{{ exam_response_texts.c|safe }}</div>
                         {% endif %}
                     </div>
                     <div class="text-end">
@@ -82,10 +82,10 @@
             {# Choice D #}
             <div class="list-group-item">
                 <div class="d-flex w-100 justify-content-between align-items-center">
-                    <div>
-                        <div class="fw-bold">D</div>
+                    <div class="d-flex align-items-center">
+                        <div class="fw-bold me-3">D</div>
                         {% if exam_response_texts.d %}
-                            <div class="small text-muted">{{ exam_response_texts.d|safe }}</div>
+                            <div class="small text-muted text-wrap">{{ exam_response_texts.d|safe }}</div>
                         {% endif %}
                     </div>
                     <div class="text-end">
@@ -103,10 +103,10 @@
             {# Choice E #}
             <div class="list-group-item">
                 <div class="d-flex w-100 justify-content-between align-items-center">
-                    <div>
-                        <div class="fw-bold">E</div>
+                    <div class="d-flex align-items-center">
+                        <div class="fw-bold me-3">E</div>
                         {% if exam_response_texts.e %}
-                            <div class="small text-muted">{{ exam_response_texts.e|safe }}</div>
+                            <div class="small text-muted text-wrap">{{ exam_response_texts.e|safe }}</div>
                         {% endif %}
                     </div>
                     <div class="text-end">