Merge pull request #13646 from edx/alisan/capa-i18n-btn-bar-fix-TNL-5642

Capa button bar attempt message position for i18n

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -289,6 +289,14 @@ div.problem {
       position: absolute;
       top: em(9);
     }
+
+    legend {
+      margin-bottom: $baseline;
+    }
+
+    legend + .question-description {
+      margin-top: -$baseline;
+    }
   }
 }
 
@@ -913,16 +921,16 @@ div.problem {
 // +Problem - Actions
 // ====================
 div.problem .action {
-  @include margin($baseline 0);
+  margin-top: $baseline;
   min-height: $baseline;
+  width: 100%;
+  display: inline-block;
 
   .problem-action-buttons-wrapper {
-    margin-bottom: $baseline / 2;
 
     @media (min-width: $bp-screen-lg) {
-      @include right($baseline * 1.5);
-      margin-top: -$baseline / 2;
-      position: absolute;
+      @include text-align(right);
+      @include float(right);
     }
 
   }
@@ -951,24 +959,26 @@ div.problem .action {
 
   }
 
-  .submission_feedback {
-    @include margin-left($baseline/2);
+  .submit-attempt-container {
+    display: table;
+
+    @media (max-width: $bp-screen-lg) {
+      max-width: 100%;
+      padding-top: $baseline;
+    }
+    .submit {
+      @include margin-right($baseline / 2);
+      float: left;
+    }
+  }
+
+  .submission-feedback {
     display: inline-block;
+    margin-top: $baseline / 2;
     color: $gray-d1;
     font-size: $medium-font-size;
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
-
-    @media (min-width: $bp-screen-lg) and (max-width: $bp-screen-xl) {
-      @include margin-left(0);
-      margin-top: $baseline / 2;
-      display: block;
-    }
-
-    @media (min-width: $bp-screen-xl) {
-      max-width: flex-grid(3, 10);
-    }
-
   }
 }
 
@@ -1084,7 +1094,7 @@ div.problem {
 
     .notification-message {
       display: inline-block;
-      width: flex-grid(8,10);
+      width: flex-grid(6,10);
       // Make notification tall enough that when the "Review" button is displayed,
       // the notification does not grow in height.
       margin-bottom: 8px;

common/lib/xmodule/xmodule/js/fixtures/problem_content.html

@@ -26,7 +26,7 @@
     <button class="submit btn-brand" data-submitting="Submitting" data-value="Submit" data-should-enable-submit-button="True"><span class="submit-label">Submit</span><span class="sr"> your answer</span></button>
 
     <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
-    <div class="submission_feedback"></div>
+    <div class="submission-feedback"></div>
   </div>
 
   <div class="notification warning notification-gentle-alert is-hidden" tabindex="-1">

lms/templates/problem.html

@@ -51,13 +51,15 @@ from openedx.core.djangolib.markup import HTML
     </span>
     % endif
     </div>
-    <button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
-        <span class="submit-label" aria-hidden="true">${ submit_button }</span><span class="sr">${_("Submit your answer")}</span>
-    </button>
-    <div class="submission_feedback" id="submission_feedback_${short_id}">
-    % if attempts_allowed:
-        ${_("You have used {num_used} of {num_total} attempts").format(num_used=attempts_used, num_total=attempts_allowed)}
-    % endif
+    <div class="submit-attempt-container">
+      <button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
+          <span class="submit-label" aria-hidden="true">${ submit_button }</span><span class="sr">${_("Submit your answer")}</span>
+      </button>
+      <div class="submission-feedback" id="submission_feedback_${short_id}">
+      % if attempts_allowed:
+          ${_("You have used {num_used} of {num_total} attempts").format(num_used=attempts_used, num_total=attempts_allowed)}
+      % endif
+      </div>
     </div>
   </div>
     <%include file="problem_notifications.html" args="