fix: remove trailing hr from ChallengeDescription (freeCodeCamp#56749)

Co-authored-by: moT01 <[email protected]>

Author: ojeytonwilliams

client/src/templates/Challenges/classic/show.tsx

@@ -392,10 +392,8 @@ function ShowClassic({
         block={block}
         challengeDescription={
           <ChallengeDescription
-            block={block}
             description={description}
             instructions={instructions}
-            superBlock={superBlock}
           />
         }
         challengeTitle={

client/src/templates/Challenges/components/challenge-description.tsx

@@ -3,33 +3,21 @@ import React from 'react';
 import PrismFormatted from './prism-formatted';
 import './challenge-description.css';
 
-type Challenge = {
-  block?: string;
+type Props = {
   description?: string;
   instructions?: string;
-  superBlock?: string;
 };
 
-function ChallengeDescription(challenge: Challenge): JSX.Element {
-  const sbClass = challenge.superBlock ? challenge.superBlock : '';
-  const bClass = challenge.block ? challenge.block : '';
-
-  return (
-    <div
-      className={`challenge-instructions ${sbClass} ${bClass}`}
-      data-playwright-test-label='challenge-description'
-    >
-      {challenge.description && <PrismFormatted text={challenge.description} />}
-      {challenge.instructions && (
-        <>
-          <hr />
-          <PrismFormatted text={challenge.instructions} />
-        </>
-      )}
-      <hr />
-    </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';
 

client/src/templates/Challenges/components/side-panel.tsx

@@ -8,6 +8,7 @@ import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import { openModal } from '../redux/actions';
+import { Spacer } from '../../../components/helpers';
 import TestSuite from './test-suite';
 
 import './side-panel.css';
@@ -83,6 +84,7 @@ export function SidePanel({
         </p>
       )}
       {challengeDescription}
+      <Spacer size='medium' />
       {toolPanel}
       <TestSuite tests={tests} />
     </div>

client/src/templates/Challenges/projects/backend/show.tsx

@@ -242,6 +242,7 @@ class BackEnd extends Component<BackEndProps> {
                   description={description}
                   instructions={instructions}
                 />
+                <Spacer size='medium' />
                 <SolutionForm
                   challengeType={challengeType}
                   // eslint-disable-next-line @typescript-eslint/unbound-method

client/src/templates/Challenges/projects/frontend/show.tsx

@@ -197,6 +197,7 @@ class Project extends Component<ProjectProps> {
                   description={description}
                   instructions={instructions}
                 />
+                <Spacer size='medium' />
                 <SolutionForm
                   challengeType={challengeType}
                   description={description}