From 77297f7ff97be158387503192354043bcae324c0 Mon Sep 17 00:00:00 2001
From: Aaron McAdam <aaron@aaronmcadam.com>
Date: Mon, 5 Aug 2024 22:45:02 +0100
Subject: [PATCH] responsive styles for the quiz

---
 src/components/quiz.tsx | 76 +++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
index 00a531b..635a7e8 100644
--- a/src/components/quiz.tsx
+++ b/src/components/quiz.tsx
@@ -123,44 +123,46 @@ export function Quiz() {
   const gridColCount = currentQuestion?.options.length % 3 === 0 ? 3 : 2;
 
   return (
-    <div className="flex-grow m-auto max-w-2xl pt-24">
-      {quizState.result ? (
-        <QuizResult result={quizState.result} />
-      ) : currentQuestion ? (
-        <div>
-          <QuizNavigation
-            questions={quizState.questions}
-            onButtonClick={(questionIndex) => {
-              setQuizState((prevState) => ({
-                ...prevState,
-                currentIndex: questionIndex,
-              }));
-            }}
-          />
-          <h3 className="font-medium text-2xl text-center mt-16">
-            {currentQuestion.title}
-          </h3>
-          <div
-            className={cn("grid gap-4 grid-cols-3 mt-8", {
-              "grid-cols-2": gridColCount === 2,
-            })}
-          >
-            {currentQuestion.options.map((o, i) => {
-              const isOptionSelected = currentQuestion.response === o;
-
-              return (
-                <QuizOption
-                  key={i}
-                  onClick={() => handleOptionClick(o)}
-                  isSelected={isOptionSelected}
-                  display={o.display}
-                  value={o.value}
-                />
-              );
-            })}
+    <div className="flex-grow p-6 overflow-auto sm:pt-24">
+      <div className="m-auto max-w-2xl">
+        {quizState.result ? (
+          <QuizResult result={quizState.result} />
+        ) : currentQuestion ? (
+          <div>
+            <QuizNavigation
+              questions={quizState.questions}
+              onButtonClick={(questionIndex) => {
+                setQuizState((prevState) => ({
+                  ...prevState,
+                  currentIndex: questionIndex,
+                }));
+              }}
+            />
+            <h3 className="font-medium text-2xl text-center mt-6 sm:mt-16">
+              {currentQuestion.title}
+            </h3>
+            <div
+              className={cn("grid gap-4 grid-cols-2 sm:grid-cols-2 mt-8", {
+                "sm:grid-cols-2": gridColCount === 2,
+              })}
+            >
+              {currentQuestion.options.map((o, i) => {
+                const isOptionSelected = currentQuestion.response === o;
+
+                return (
+                  <QuizOption
+                    key={i}
+                    onClick={() => handleOptionClick(o)}
+                    isSelected={isOptionSelected}
+                    display={o.display}
+                    value={o.value}
+                  />
+                );
+              })}
+            </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
+      </div>
     </div>
   );
 }