From acccc3a98131bf07e45deb9d5d63bd24e5317378 Mon Sep 17 00:00:00 2001
From: Agrendalath <piotr@surowiec.it>
Date: Wed, 16 Oct 2019 01:36:31 +0200
Subject: [PATCH] Fix exam timer text wrapping on smaller screens

This fixes wrapping the exam-text bar on smaller screens during timed exams, which prevented users from viewing the exam's content.
---
 .../course/layout/_courseware_preview.scss    |  5 ++++-
 .../proctored-exam-status.underscore          | 22 +++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 2c2626a8b6..53bfa37175 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/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 {
diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index de14370bf4..b70a3d977c 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -6,17 +6,6 @@
                 .replace(/>/g, '&gt;')
         }
     %>
-    <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>