Merge pull request #22446 from open-craft/agrendalath/bb-1505-fix_mobile_timer

Fix timer text wrapping on smaller screens

lms/static/sass/course/layout/_courseware_preview.scss

@@ -83,7 +83,10 @@ $proctoring-banner-text-size: 14px;
 
     .exam-text {
       display: inline-block;
-      width: calc(100% - 250px);
+
+      @include media-breakpoint-up(md) {
+        width: calc(100% - 250px);
+      }
     }
 
     a {

lms/templates/courseware/proctored-exam-status.underscore

@@ -6,17 +6,6 @@
                 .replace(/>/g, '>')
         }
     %>
-    <div class='exam-text js-exam-text' data-show-long="true">
-        <% // xss-lint: disable=underscore-not-escaped %>
-        <%= interpolate_text(gettext('You are taking "{exam_link}" as {exam_type}. '), {exam_link: "<a href='" + exam_url_path + "'>"+gtLtEscape(exam_display_name)+"</a>", exam_type: (!_.isUndefined(arguments[0].exam_type)) ? exam_type : gettext('a timed exam')}) %>
-        <span class="js-exam-additional-text" aria-hidden="false">
-            <%- gettext('The timer on the right shows the time remaining in the exam.') %>
-            <%- gettext('To receive credit for problems, you must select "Submit" for each problem before you select "End My Exam".') %>
-        </span>
-        <button class="js-toggle-show-more btn btn-link" data-show-more-text="<%- gettext('Show More') %>" data-show-less-text="<%- gettext('Show Less') %>">
-            <%- gettext('Show Less') %>
-        </button>
-    </div>
     <div id="turn_in_exam_id" class="pull-right turn_in_exam" role="region" aria-label="<%- gettext('Exam timer and end exam button')%>">
         <span>
             <% if(attempt_status !== 'ready_to_submit') {%>
@@ -36,4 +25,15 @@
             </button>
         </span>
     </div>
+    <div class='exam-text js-exam-text' data-show-long="true">
+        <% // xss-lint: disable=underscore-not-escaped %>
+        <%= interpolate_text(gettext('You are taking "{exam_link}" as {exam_type}. '), {exam_link: "<a href='" + exam_url_path + "'>"+gtLtEscape(exam_display_name)+"</a>", exam_type: (!_.isUndefined(arguments[0].exam_type)) ? exam_type : gettext('a timed exam')}) %>
+        <span class="js-exam-additional-text" aria-hidden="false">
+            <%- gettext('The timer on the right shows the time remaining in the exam.') %>
+            <%- gettext('To receive credit for problems, you must select "Submit" for each problem before you select "End My Exam".') %>
+        </span>
+        <button class="js-toggle-show-more btn btn-link" data-show-more-text="<%- gettext('Show More') %>" data-show-less-text="<%- gettext('Show Less') %>">
+            <%- gettext('Show Less') %>
+        </button>
+    </div>
 </div>