UI fixes for questions

src/components/Questions/QuestionCard.tsx

@@ -94,7 +94,7 @@ export function QuestionCard(props: QuestionCardProps) {
       >
         {!question.isLongAnswer && (
           <div
-            className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-base leading-normal sm:text-xl`}
+            className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-snug sm:text-xl`}
             dangerouslySetInnerHTML={{
               __html: markdownToHtml(question.answer, false),
             }}

src/data/question-groups/react/content/pure-components.md

@@ -2,7 +2,7 @@ Pure components re-render only when the props passed to the component changes. F
 
 To create a pure component, you can use the `memo` function from React. It is a higher order component which takes a component as an argument and returns a new component. The new component renders only if the props change.
 
-```jsx
+```javascript
 import React, { memo } from 'react';
 
 const ChildComponent = ({ name }) => {

src/data/question-groups/react/content/synthetic-events.md

@@ -2,7 +2,7 @@ React differs from HTML in that it uses a synthetic event system instead of dire
 
 The events such as `onClick`, `onSubmit`, `onFocus`, etc. are all camel-cased to be consistent with the naming convention in JavaScript. React event handlers are written inside curly braces:
 
-```jsx
+```javascript
 function activateLasers(e) {
     e.preventDefault();
     console.log('The button was clicked.');

src/pages/questions/[questionGroupId].astro

@@ -38,7 +38,7 @@ const { frontmatter } = questionGroup;
   noIndex={true}
 >
   <div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'>
-    <div class='container !max-w-[700px]'>
+    <div class='container !max-w-[740px]'>
       <div class='mb-3 sm:mb-5 mt-2 text-left sm:text-center sm:mt-8'>
         <div class='mb-2 md:mb-6'>
           <a