From 80819f8914db27f0432035116b13101c230a6631 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 22 Sep 2023 05:08:24 +0100
Subject: [PATCH] UI fixes for questions

---
 src/components/Questions/QuestionCard.tsx                  | 2 +-
 src/data/question-groups/react/content/pure-components.md  | 2 +-
 src/data/question-groups/react/content/synthetic-events.md | 2 +-
 src/pages/questions/[questionGroupId].astro                | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Questions/QuestionCard.tsx b/src/components/Questions/QuestionCard.tsx
index d42ab3120..ef1b8f141 100644
--- a/src/components/Questions/QuestionCard.tsx
+++ b/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),
             }}
diff --git a/src/data/question-groups/react/content/pure-components.md b/src/data/question-groups/react/content/pure-components.md
index ea409abae..87ee12c6a 100644
--- a/src/data/question-groups/react/content/pure-components.md
+++ b/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 }) => {
diff --git a/src/data/question-groups/react/content/synthetic-events.md b/src/data/question-groups/react/content/synthetic-events.md
index 807284df5..946393fef 100644
--- a/src/data/question-groups/react/content/synthetic-events.md
+++ b/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.');
diff --git a/src/pages/questions/[questionGroupId].astro b/src/pages/questions/[questionGroupId].astro
index db537cf85..81f285917 100644
--- a/src/pages/questions/[questionGroupId].astro
+++ b/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