From 97fa6582c725f321459d3f6cf9b169e322fbcdac Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Fri, 22 Nov 2024 17:59:26 +0100
Subject: [PATCH] fix(client): project euler mathjax (#57292)

---
 .../src/templates/Challenges/classic/show.tsx |  2 ++
 .../components/challenge-description.tsx      | 32 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
index 78d98a5c14f..f1ed56218ef 100644
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/client/src/templates/Challenges/classic/show.tsx
@@ -394,6 +394,8 @@ function ShowClassic({
           <ChallengeDescription
             description={description}
             instructions={instructions}
+            superBlock={superBlock}
+            block={block}
           />
         }
         challengeTitle={
diff --git a/client/src/templates/Challenges/components/challenge-description.tsx b/client/src/templates/Challenges/components/challenge-description.tsx
index c8c1b538655..86f3aa107f0 100644
--- a/client/src/templates/Challenges/components/challenge-description.tsx
+++ b/client/src/templates/Challenges/components/challenge-description.tsx
@@ -6,18 +6,28 @@ import './challenge-description.css';
 type Props = {
   description?: string;
   instructions?: string;
+  superBlock?: string;
+  block?: string;
+};
+const ChallengeDescription = ({
+  description,
+  instructions,
+  superBlock,
+  block
+}: Props) => {
+  const sbClass = superBlock ? superBlock : '';
+  const bClass = block ? block : '';
+  return (
+    <div
+      className={`challenge-instructions ${sbClass} ${bClass}`}
+      data-playwright-test-label='challenge-description'
+    >
+      {description && <PrismFormatted text={description} />}
+      {instructions && description && <hr />}
+      {instructions && <PrismFormatted text={instructions} />}
+    </div>
+  );
 };
-
-const ChallengeDescription = ({ description, instructions }: Props) => (
-  <div
-    className={'challenge-instructions'}
-    data-playwright-test-label='challenge-description'
-  >
-    {description && <PrismFormatted text={description} />}
-    {instructions && description && <hr />}
-    {instructions && <PrismFormatted text={instructions} />}
-  </div>
-);
 
 ChallengeDescription.displayName = 'ChallengeDescription';