From 02e844006df2472100af7db811addf628cec752e Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Mon, 27 Oct 2025 23:10:14 +0000
Subject: [PATCH] t

---
 sbas/templates/sbas/exam_take.html | 35 ++++++++++++++++++++++--------
 templates/base.html                | 18 +++++++++++++++
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/sbas/templates/sbas/exam_take.html b/sbas/templates/sbas/exam_take.html
index 619b5bbd..fdd9a59b 100755
--- a/sbas/templates/sbas/exam_take.html
+++ b/sbas/templates/sbas/exam_take.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="container py-3">
+<div class="py-3">
     <div class="d-flex justify-content-between align-items-start mb-2">
         
             <span id="user-id" class="text-muted small">
@@ -26,8 +26,8 @@
         <div class="alert alert-primary review-mode-alert" role="alert">Exam completed.</div>
     {% endif %}
 
-    <div class="row g-3">
-        <div class="col-12 col-md-8">
+    <div class="row">
+        <div class="col-12 col-md-8 order-1 order-md-1 mb-3">
             <div class="card">
                 <div class="card-body">
                     <div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
@@ -40,7 +40,7 @@
                         <li class="list-group-item" data-ans="e">{{ question.e_answer|safe }}</li>
                     </ul>
 
-                      <form method="POST" class="post-form mt-3">{% csrf_token %}
+                    <form method="POST" class="post-form mt-3">{% csrf_token %}
                         <div class="form-contents visually-hidden">{{ form }}</div>
 
                         <div class="d-flex flex-column flex-sm-row gap-2 mt-2">
@@ -74,8 +74,10 @@
             </div>
         </div>
 
-        <div class="col-12 col-md-4">
-            <div class="card sticky-top" style="top:1rem;">
+        <div class="col-4 col-md-4 order-2 order-md-2 mb-3">
+            {% include "sbas/exam_take_help.html" %}
+
+            <div class="card sticky-top mt-3" style="top:1rem;">
                 <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>
@@ -94,7 +96,6 @@
                     </div>
                 </div>
             </div>
-            {% include "sbas/exam_take_help.html" %}
         </div>
     </div>
   
@@ -129,10 +130,11 @@
                 $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}
 
             for (let i = 0; i < {{ exam_length }}; i++) {
-                qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
+                // Create Bootstrap-styled buttons and append into the flex-wrap container
+                qbutton = $(`<button type="button" class="btn btn-sm btn-outline-secondary question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
 
                 if (i == {{pos}}) {qbutton.addClass("current-question")}
-                $("#menu-list").append(qbutton);
+                $("#menu-buttons").append(qbutton);
 
             }
             $("button.question-menu-item").on("click", (e) => {
@@ -164,5 +166,20 @@
             float: right
         }
 
+        /* Make question nav buttons consistent and allow wrapping on small screens */
+        .question-menu-item {
+            white-space: nowrap;
+            flex: 0 0 auto;
+            padding: .25rem .5rem;
+        }
+
+        /* Disable sticky behaviour on narrow viewports so the sidebar stacks naturally */
+        @media (max-width: 767.98px) {
+            .card.sticky-top {
+                position: static !important;
+                top: auto !important;
+            }
+        }
+
     </style>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 79085138..2d9475c7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -92,6 +92,24 @@
                 word-break: break-word;
                 max-width: 100%;
             }
+            /* Reduce horizontal page margins on small screens for better use of space */
+            @media (max-width: 1210px) {
+                /* Narrow the default container padding */
+                .container,
+                .container-fluid {
+                    padding-left: .5rem !important;
+                    padding-right: .5rem !important;
+                }
+
+                /* Also tighten the main content wrapper specifically */
+                div.content.container {
+                    padding-left: .5rem !important;
+                    padding-right: .5rem !important;
+                    max-width: 100% !important;
+
+
+                }
+            }
         </style>
         {% block css %}
         {% endblock %}