update QuizRadioGroup component layout and spacing

Author: pettinarip

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -61,7 +61,7 @@ export const QuizRadioGroup = () => {
     <Box as="fieldset" w="full" {...getRootProps()}>
       <Text
         as="legend"
-        textAlign={{ base: "center", md: "start" }}
+        textAlign="center"
         fontWeight="700"
         size="2xl"
         w="full"
@@ -73,32 +73,34 @@ export const QuizRadioGroup = () => {
         {t(prompt)}
       </Text>
 
-      <Stack spacing="4">
-        {answers.map(({ id, label }, idx) => {
-          const display =
-            !answerStatus || id === selectedAnswer ? "inline-flex" : "none"
-
-          return (
-            <Box key={id} display={display}>
-              <CustomRadio
-                label={t(label)}
-                isAnswerVisible={!!answerStatus}
-                isSelectedCorrect={isSelectedCorrect}
-                index={idx}
-                {...getRadioProps({ value: id })}
-              />
-            </Box>
-          )
-        })}
-      </Stack>
-
-      {!!answerStatus && (
-        <Stack spacing="2" mt="6">
-          <Text fontWeight="bold">{t("explanation")}</Text>
-
-          <Text m={0}>{t(explanation)}</Text>
+      <Box px={{ base: "0", md: "12", lg: "16" }}>
+        <Stack spacing="4">
+          {answers.map(({ id, label }, idx) => {
+            const display =
+              !answerStatus || id === selectedAnswer ? "inline-flex" : "none"
+
+            return (
+              <Box key={id} display={display}>
+                <CustomRadio
+                  label={t(label)}
+                  isAnswerVisible={!!answerStatus}
+                  isSelectedCorrect={isSelectedCorrect}
+                  index={idx}
+                  {...getRadioProps({ value: id })}
+                />
+              </Box>
+            )
+          })}
         </Stack>
-      )}
+
+        {!!answerStatus && (
+          <Stack spacing="2" mt="6">
+            <Text fontWeight="bold">{t("explanation")}</Text>
+
+            <Text m={0}>{t(explanation)}</Text>
+          </Stack>
+        )}
+      </Box>
     </Box>
   )
 }

src/components/Quiz/QuizWidget/index.tsx

@@ -118,7 +118,7 @@ const QuizWidget = ({
       <Stack
         w="full"
         gap="8"
-        px={{ base: "8", md: "12", lg: "16" }}
+        px={isStandaloneQuiz ? "4" : "0"}
         // Reduce padding when showing Spinner
         pt={!quizData ? "10" : { base: "5", md: "12" }}
         pb={!quizData ? "5" : { base: "4", md: "8" }}