fix(client): enable horizontal scroll for MCQ code blocks on mobile (#67151)

Co-authored-by: Venkat <venkat@Venkats-MacBook-Pro.local>

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

@@ -83,7 +83,7 @@ function MultipleChoiceQuestions({
         }
       />
       {questions.map((question, questionIndex) => (
-        <fieldset key={questionIndex}>
+        <fieldset key={questionIndex} className='mcq-fieldset'>
           <legend className='mcq-question-text'>
             <PrismFormatted className={'line-numbers'} text={question.text} />
           </legend>

client/src/templates/Challenges/video.css

@@ -191,9 +191,19 @@ input:focus-visible + .video-quiz-input-visible {
   color: var(--danger-color);
 }
 
+.mcq-fieldset {
+  min-width: 0;
+}
+
 /* Override the default styles of `legend` element */
 .mcq-question-text {
   border: none;
   color: var(--primary-color);
   margin: 0;
+  max-width: 100%;
+}
+
+.mcq-question-text pre {
+  max-width: 100%;
+  overflow-x: auto;
 }