Refactor exam_take.html for improved layout by making columns full-width and adjusting padding for better responsiveness

sbas/templates/sbas/exam_take.html

@@ -26,8 +26,9 @@
         <div class="alert alert-primary review-mode-alert" role="alert">Exam completed.</div>
     {% endif %}
 
-    <div class="row">
+    <div class="row flex-wrap">
-        <div class="col-12 col-md-8 order-1 order-md-1 mb-3">
+        {# Layout change: make both columns full-width so the right panel is not a sidebar #}
+        <div class="col-12 order-1 mb-3">
             <div class="card">
                 <div class="card-body">
                     <div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
@@ -74,10 +75,10 @@
             </div>
         </div>
 
-        <div class="col-4 col-md-4 order-2 order-md-2 mb-3">
+        <div class="col-12 order-2 mb-3">
             {% include "sbas/exam_take_help.html" %}
 
-            <div class="card sticky-top mt-3" style="top:1rem;">
+            <div class="card mt-3">
                 <div class="card-body">
                     <h6 class="card-title">Questions</h6>
                     <p class="small text-muted mb-2">Tap a number to jump to that question.</p>
@@ -90,7 +91,7 @@
                     </div>
 
                     <div id="menu-list" class="collapse d-md-block">
-                        <div class="d-flex flex-wrap gap-2" id="menu-buttons" role="toolbar" aria-label="Question navigation">
+                        <div class="d-flex flex-wrap gap-1" id="menu-buttons" role="toolbar" aria-label="Question navigation">
                             <!-- Buttons injected by JS -->
                         </div>
                     </div>
@@ -170,7 +171,7 @@
         .question-menu-item {
             white-space: nowrap;
             flex: 0 0 auto;
-            padding: .25rem .5rem;
+            padding: .1rem .1rem;
         }
 
         /* Disable sticky behaviour on narrow viewports so the sidebar stacks naturally */