Improve usability of conditional messages in Studio, fix doctoring

problem_builder/public/css/problem-builder-edit.css

@@ -50,7 +50,6 @@
   cursor: default;
 }
 
-.xblock[data-block-type=sb-review-step] .submission-message-help p,
 .xblock[data-block-type=step-builder] .submission-message-help p,
 .xblock[data-block-type=problem-builder] .submission-message-help p {
 	border-top: 1px solid #ddd;
@@ -60,6 +59,18 @@
 	padding-top: 0.3em;
 }
 
+.xblock[data-block-type=sb-review-step] .conditional-message-help p {
+  font-size: 0.8em;
+  font-style: italic;
+  margin-bottom: 0.4em;
+}
+
+.xblock-preview_view-sb-conditional-message {
+  border-top: 1px solid #ddd;
+  margin-top: 1.3em;
+  padding-top: 0.2em;
+}
+
 .xblock-author_view-pb-slider .url-name-footer {
     margin: 0 -20px -20px -20px; /* Counteract spacing from xblock-render wrapper. */
 }

problem_builder/step_review.py

@@ -128,7 +128,7 @@ class ConditionalMessageBlock(
                 desc += self.SCORE_CONDITIONS_DESCRIPTIONS[self.score_condition] + "<br>"
             if self.num_attempts_condition != self.ATTEMPTS_ANY:
                 desc += self.NUM_ATTEMPTS_COND_DESCRIPTIONS[self.num_attempts_condition]
-        fragment.content += u'<div class="submission-message-help"><p>{}</p></div>'.format(desc)
+        fragment.content = u'<div class="conditional-message-help"><p>{}</p></div>'.format(desc) + fragment.content
         return fragment
 
 
@@ -176,7 +176,9 @@ class ScoreSummaryBlock(XBlockWithTranslationServiceMixin, XBlockWithPreviewMixi
 @XBlock.needs("i18n")
 class PerQuestionFeedbackBlock(XBlockWithTranslationServiceMixin, XBlockWithPreviewMixin, NoSettingsMixin, XBlock):
     """
-    Summaryize the score that the student earned.
+    Display any on-assessment-review-question messages.
+    These messages are defined within individual questions and are only displayed if the student
+    got that particular question wrong.
     """
     CATEGORY = 'sb-review-per-question-feedback'
     STUDIO_LABEL = _("Per-Question Feedback")