fix warning box positioning (again)

I noticed that the code to position warning boxes was using the
document's width to work out if warning boxes should be pushed left, but
now that the <main> element has overflow-x: hidden, it should be using the
width of the question element.

This changes the positioning code to do that, and I think it resolves
some errors in positioning warnings for gaps, so they shouldn't ever
overlap the input box now.

Author: christianp

themes/default/files/resources/exam.css

@@ -1130,7 +1130,7 @@ select.multiplechoice {
     margin-top: 2em;
 }
 
-.gap .warnings {
+.gap .warnings:not(.shifted-down) {
     margin-top: -0.5em;
 }
 .warnings.stick-right {

themes/default/files/scripts/part-display.js

@@ -196,8 +196,10 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
             if(!pd.html || !pd.warningsShown.peek()) {
                 return;
             }
-            var warnings_box = pd.html.querySelector('.warnings');
-            var answer = pd.html.querySelector('.student-answer');
+            var margin = 10;
+
+            var warnings_box = pd.html.querySelector(':scope > .student-answer .warnings');
+            var answer = pd.html.querySelector(':scope > .student-answer');
             var offsetTop = 0;
             var offsetLeft = 0;
             var el = answer;
@@ -210,19 +212,22 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
             var answer_width = answer.getBoundingClientRect().width;
 
             var wtop = offsetTop + (p.isGap ? 0 : answer_height);
-            var wleft = (offsetLeft + (p.isGap ? answer_width : 0));
+            var wleft = (offsetLeft + (p.isGap ? margin + answer_width : 0));
 
             warnings_box.style.top = wtop + 'px';
             warnings_box.style.left = wleft + 'px';
 
             var box = warnings_box.getBoundingClientRect();
-            var docWidth = document.documentElement.clientWidth;
-            var margin = 10;
-            var dr = box.right - docWidth + document.documentElement.clientLeft + margin;
+            const question_html = pd.part.question.display.html;
+            var question_box = question_html.getBoundingClientRect();
+            var docWidth = question_box.width;
+            var dr = box.right - question_box.left - docWidth + margin;
+            warnings_box.classList.remove('shifted-down');
             if(dr > 0) {
                 wleft -= dr;
                 if(p.isGap) {
                     wtop += answer_height;
+                    warnings_box.classList.add('shifted-down');
                 }
                 warnings_box.style.left = wleft + 'px';
                 warnings_box.style.top = wtop + 'px';