fix(client): spacing issues in quiz challenge (freeCodeCamp#56805)

Author: huyenltnguyen

client/src/templates/Challenges/quiz/show.css

@@ -5,6 +5,7 @@
 }
 
 /* Override the bottom margin set in global.css */
-.quiz-challenge-container .quiz-answer-label p:last-child {
+.quiz-challenge-container .quiz-answer-label p:last-child,
+.quiz-challenge-container div[role='radiogroup'] label p:last-child {
   margin-bottom: 0;
 }

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

@@ -7,11 +7,18 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Button, Quiz, useQuiz } from '@freecodecamp/ui';
+import {
+  Container,
+  Col,
+  Row,
+  Button,
+  Quiz,
+  useQuiz,
+  Spacer
+} from '@freecodecamp/ui';
 
 // Local Utilities
 import { shuffleArray } from '../../../../../shared/utils/shuffle-array';
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 // import { challengeTypes } from '../../../../../shared/config/challenge-types';
@@ -228,7 +235,7 @@ const ShowQuiz = ({
         />
         <Container className='quiz-challenge-container'>
           <Row>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <ChallengeTitle
               isCompleted={isChallengeCompleted}
               translationPending={translationPending}
@@ -237,15 +244,17 @@ const ShowQuiz = ({
             </ChallengeTitle>
 
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+              <Spacer size='m' />
               <ChallengeDescription description={description} />
+              <Spacer size='l' />
               <ObserveKeys>
                 <Quiz questions={quizData} disabled={hasSubmitted} />
               </ObserveKeys>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <div aria-live='polite' aria-atomic='true'>
                 {errorMessage}
               </div>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               {/*
                  There are three cases for the button display:
                  1. Campers submit the answers but don't pass
@@ -273,7 +282,7 @@ const ShowQuiz = ({
                   {t('buttons.submit-and-go')}
                 </Button>
               )}
-              <Spacer size='large' />
+              <Spacer size='l' />
             </Col>
             <CompletionModal />
           </Row>