Add flex-wrap to step card footer

Small overflow issue I noticed while looking at navbar scaling issue in core-421 While I was here, I also replaced some margins with gap
openstax · Dec 12, 2024 · 7e28b5a · 7e28b5a
1 parent 5d59a4e
commit 7e28b5a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/assessment-components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/src/index.d.ts",

diff --git a/src/components/StepCardFooter.tsx b/src/components/StepCardFooter.tsx
@@ -25,11 +25,14 @@ export const StepCardFooter = styled.div`
         padding-top: 32px;
         display: flex;
         justify-content: space-between;
+        gap: 1.6rem;
+
+        ${breakpoints.mobile`
+            flex-wrap: wrap;
+        `}
     }
 
     .points {
-        margin-bottom: 1.6rem; // Replace with https://caniuse.com/?search=gap soon
-
         .attempts-left {
           color: #B03808;
           font-weight: bold;
@@ -39,7 +42,6 @@ export const StepCardFooter = styled.div`
     .controls {
         display: flex;
         flex-flow: column wrap-reverse;
-        margin-left: 1.6rem; // Replace with https://caniuse.com/?search=gap soon
 
         button + button {
             margin: 0.8rem 0 0 0;

diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -159,7 +159,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kbdJYE step-card-footer"
+              className="sc-iBkjds kLYXXQ step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -346,7 +346,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kbdJYE step-card-footer"
+              className="sc-iBkjds kLYXXQ step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -673,7 +673,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
               </div>
             </div>
             <div
-              className="sc-iBkjds kbdJYE step-card-footer"
+              className="sc-iBkjds kLYXXQ step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -1040,7 +1040,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
               </div>
             </div>
             <div
-              className="sc-iBkjds kbdJYE step-card-footer"
+              className="sc-iBkjds kLYXXQ step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -1227,7 +1227,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kbdJYE step-card-footer"
+              className="sc-iBkjds kLYXXQ step-card-footer"
             >
               <div
                 className="step-card-footer-inner"

diff --git a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
@@ -106,7 +106,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -252,7 +252,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -399,7 +399,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -546,7 +546,7 @@ exports[`ExerciseQuestion renders Submit & continue button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -687,7 +687,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -840,7 +840,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -992,7 +992,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1156,7 +1156,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1302,7 +1302,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1448,7 +1448,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo step-card-footer"
+    className="sc-hKMtZM IyIWE step-card-footer"
   >
     <div
       className="step-card-footer-inner"

diff --git a/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap b/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`Free Response Input matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo"
+    className="sc-hKMtZM IyIWE"
   >
     <div
       className="points"
@@ -125,7 +125,7 @@ exports[`Free Response Input renders leftInfoComponent component 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo"
+    className="sc-hKMtZM IyIWE"
   >
     <div
       className="points"
@@ -208,7 +208,7 @@ exports[`Free Response Input renders word limit error 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM eTQwo"
+    className="sc-hKMtZM IyIWE"
   >
     <div
       className="points"