the entire sidebar scrolls on short viewports

A recent change madethe question list in the sidebar scroll independently, and
the other elements consume the rest of the viewport height.
When the viewport is very short, and the logo + exam title are very
tall, this could leave almost no space for the question list on short
viewports.

This commit adds a breakpoint of 45em to make the entire sidebar scroll,
so the control buttons aren't initially visible but you can at least use
the full height for showing the question list.

The exam title is shown at font-size: 1em, so should take less space.

The control buttons are display: flex, so the display options and pause
buttons will usually sit on the same line.

The timer has a slight box-shadow on its top edge so when it's rendered
over the question list it's visually separate.

themes/default/files/resources/exam.css

@@ -254,12 +254,12 @@ body.navigate-menu.show-nav #everything > #topNav {
     border-width: 0 1px 0 0;
 }
 .navmenu-nav {
-    margin-bottom: var(--spacing);
+    margin-bottom: 0;
 }
 .navmenu-brand {
     display: block;
-    font-size: 1.5rem;
-    padding: var(--spacing);
+    font-size: 1em;
+    padding: 0 var(--spacing);
     margin: var(--spacing) 0;
 }
 .navmenu-default {
@@ -559,6 +559,8 @@ input.jme {
 }
 .exam-name {
 	font-weight: bold;
+    max-height: 5em;
+    overflow-y: auto;
 }
 
 #exam-progress {
@@ -622,6 +624,18 @@ input.jme {
 	margin: 0 0 0 0.3em;
 }
 
+/* Make the entire menu scroll on short viewports */
+@media screen and (max-height: 45em) {
+    #navMenu {
+        overflow-y: auto;
+    }
+    #questionList {
+        overflow: initial;
+    }
+    .menuButtons {
+        padding-bottom: var(--spacing);
+    }
+}
 
 #skills-table .active {
     font-weight: bold;
@@ -662,18 +676,28 @@ input.jme {
     bottom: 0;
     padding: 0.5em;
     background-color: var(--main-colour);
+    box-shadow: 0px -5px 10px -7px var(--text-colour);
 }
 
 .menuButtons {
-	margin-top: 1em;
+	margin: var(--spacing);
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing);
+	justify-content: center;
+}
+
+.menuButtons::before, .menuButtons::after {
+    display: none;
 }
+
 .menuButtons button {
-	min-width: 90%;
+    min-width: 90%;
+    margin: 0;
 }
 
 .menuButtons .thin-button {
     min-width: 6em;
-    margin-bottom: 1em;
 }
 
 /* Question selection menu */

themes/default/templates/nav-sequence.html

@@ -63,9 +63,9 @@ <h2 data-bind="text: name, typeset: name"></h2>
 
         <ul class="nav navmenu-nav menuButtons">
             <li><button class="btn btn-default navbar-btn center-block thin-button" type="button" data-bind="click: Numbas.display.showStyleModal" data-localise="control.style options"></button></li>
-            <li><button class="btn btn-primary navbar-btn center-block thin-button" id="pauseBtn" data-localise="control.pause" data-bind="click: Numbas.controls.pauseExam, visible: allowPause && mode()=='normal'"></button></li>
-            <li><button class="btn btn-danger navbar-btn center-block" id="endBtn" data-localise="control.end exam" data-bind="click: Numbas.controls.endExam, visible: mode()=='normal'"></button></li>
-            <li><button class="btn btn-primary navbar-btn center-block" data-localise="control.back to results" data-bind="click: Numbas.controls.backToResults, visible: mode()=='review'"></button></li>
+            <li data-bind="visible: allowPause && mode()=='normal'"><button class="btn btn-primary navbar-btn center-block thin-button" id="pauseBtn" data-localise="control.pause" data-bind="click: Numbas.controls.pauseExam"></button></li>
+            <li data-bind="visible: mode()=='normal'"><button class="btn btn-danger navbar-btn center-block" id="endBtn" data-localise="control.end exam" data-bind="click: Numbas.controls.endExam"></button></li>
+            <li data-bind="visible: mode()=='review'"><button class="btn btn-primary navbar-btn center-block" data-localise="control.back to results" data-bind="click: Numbas.controls.backToResults"></button></li>
         </ul>
 
     </div>