fix(client): multiple choice question feedback display (#57740)

client/src/templates/Challenges/components/multiple-choice-questions.tsx

@@ -83,12 +83,13 @@ function MultipleChoiceQuestions({
                     <div
                       className={`video-quiz-option-label mcq-feedback ${isCorrect ? 'mcq-correct' : 'mcq-incorrect'}`}
                     >
-                      {isCorrect
-                        ? t('learn.quiz.correct-answer')
-                        : t('learn.quiz.incorrect-answer')}
+                      <p>
+                        {isCorrect
+                          ? t('learn.quiz.correct-answer')
+                          : t('learn.quiz.incorrect-answer')}
+                      </p>
                       {feedback && (
-                        <>
-                          <span>&nbsp;</span>
+                        <p>
                           <PrismFormatted
                             className={
                               isCorrect
@@ -99,7 +100,7 @@ function MultipleChoiceQuestions({
                             useSpan
                             noAria
                           />
-                        </>
+                        </p>
                       )}
                     </div>
                   )}

client/src/templates/Challenges/video.css

@@ -139,6 +139,7 @@ input:focus-visible + .video-quiz-input-visible {
 
 .mcq-feedback {
   border-top: none;
+  display: block;
 }
 
 .mcq-prism-correct code {