From caa79096f17bf971827fd5165733fb085eb98ad0 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 24 Sep 2022 07:55:47 -0700
Subject: [PATCH 1/2] Make exercise list responsive

---
 pages/exercises/[lessonSlug].tsx | 29 +++++++++++++++--------------
 scss/exercises.module.scss       |  5 +++++
 2 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 scss/exercises.module.scss

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 6992d03b0..e1770e34c 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -16,6 +16,7 @@ import { NewButton } from '../../components/theme/Button'
 import ExerciseCard, { ExerciseCardProps } from '../../components/ExerciseCard'
 import { ArrowLeftIcon } from '@primer/octicons-react'
 import GET_EXERCISES from '../../graphql/queries/getExercises'
+import styles from '../../scss/exercises.module.scss'
 
 const exampleProblem = `const a = 5
 a = a + 10
@@ -24,6 +25,11 @@ a = a + 10
 const mockExercisePreviews: ExercisePreviewCardProps[] = [
   { moduleName: 'Variables', state: 'ANSWERED', problem: exampleProblem },
   { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
+  { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
+  { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
+  { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
+  { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
+  { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
   { moduleName: 'Variables', state: 'ANSWERED', problem: exampleProblem }
 ]
 
@@ -169,20 +175,15 @@ const ExerciseList = ({
           SOLVE EXERCISES
         </NewButton>
       </div>
-      <div className="container">
-        <div className="row">
-          {mockExercisePreviews.map((exercisePreview, i) => (
-            <ExercisePreviewCard
-              key={i}
-              moduleName={exercisePreview.moduleName}
-              state={exercisePreview.state}
-              problem={exercisePreview.problem}
-              className={`col ${
-                i < mockExercisePreviews.length - 1 ? 'me-4' : ''
-              }`}
-            />
-          ))}
-        </div>
+      <div className={styles.exerciseList__container}>
+        {mockExercisePreviews.map((exercisePreview, i) => (
+          <ExercisePreviewCard
+            key={i}
+            moduleName={exercisePreview.moduleName}
+            state={exercisePreview.state}
+            problem={exercisePreview.problem}
+          />
+        ))}
       </div>
     </>
   )
diff --git a/scss/exercises.module.scss b/scss/exercises.module.scss
new file mode 100644
index 000000000..13fed2039
--- /dev/null
+++ b/scss/exercises.module.scss
@@ -0,0 +1,5 @@
+.exerciseList__container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2em;
+}

From 12945fb90b2a405ee973360a97cf997ac2595869 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sat, 24 Sep 2022 10:24:52 -0700
Subject: [PATCH 2/2] Make DOJO solve exercises button 100% on small width

---
 pages/exercises/[lessonSlug].tsx | 17 ++++++++++++-----
 scss/exercises.module.scss       |  6 ++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index e1770e34c..cdb48d486 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -169,11 +169,18 @@ const ExerciseList = ({
           tabs={tabs}
         />
       </div>
-      <div className="d-flex justify-content-between align-items-center">
-        <h1 className="my-5 fs-2">{lessonTitle}</h1>
-        <NewButton onClick={() => setExerciseIndex(0)}>
-          SOLVE EXERCISES
-        </NewButton>
+      <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
+        <h1 className="my-2 my-md-5 fs-2">{lessonTitle}</h1>
+        <div
+          className={`mb-3 mb-md-0 d-flex d-md-block ${styles.exerciseList__solveExercisesButtonContainer}`}
+        >
+          <NewButton
+            className="flex-grow-1"
+            onClick={() => setExerciseIndex(0)}
+          >
+            SOLVE EXERCISES
+          </NewButton>
+        </div>
       </div>
       <div className={styles.exerciseList__container}>
         {mockExercisePreviews.map((exercisePreview, i) => (
diff --git a/scss/exercises.module.scss b/scss/exercises.module.scss
index 13fed2039..59a0e5c92 100644
--- a/scss/exercises.module.scss
+++ b/scss/exercises.module.scss
@@ -3,3 +3,9 @@
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 2em;
 }
+
+.exerciseList__solveExercisesButtonContainer {
+  @media (max-width: 767px) {
+    width: 100%;
+  }
+}