Skip to content

Commit 9734f3c

Browse files
TylerZeroMasterTylerZeroMaster
authored
Add flex-wrap to step card footer (#81)
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
1 parent 5d59a4e commit 9734f3c

File tree

5 files changed

+24
-22
lines changed

5 files changed

+24
-22
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@openstax/assessment-components",
3-
"version": "1.2.0",
3+
"version": "1.2.1",
44
"license": "MIT",
55
"source": "./src/index.ts",
66
"types": "./dist/src/index.d.ts",

‎src/components/StepCardFooter.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,14 @@ export const StepCardFooter = styled.div`
2525
padding-top: 32px;
2626
display: flex;
2727
justify-content: space-between;
28+
gap: 1.6rem;
29+
30+
${breakpoints.mobile`
31+
flex-wrap: wrap;
32+
`}
2833
}
2934
3035
.points {
31-
margin-bottom: 1.6rem; // Replace with https://caniuse.com/?search=gap soon
32-
3336
.attempts-left {
3437
color: #B03808;
3538
font-weight: bold;
@@ -39,7 +42,6 @@ export const StepCardFooter = styled.div`
3942
.controls {
4043
display: flex;
4144
flex-flow: column wrap-reverse;
42-
margin-left: 1.6rem; // Replace with https://caniuse.com/?search=gap soon
4345
4446
button + button {
4547
margin: 0.8rem 0 0 0;

‎src/components/__snapshots__/Exercise.spec.tsx.snap

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
159159
</div>
160160
</div>
161161
<div
162-
className="sc-iBkjds kbdJYE step-card-footer"
162+
className="sc-iBkjds kLYXXQ step-card-footer"
163163
>
164164
<div
165165
className="step-card-footer-inner"
@@ -346,7 +346,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
346346
</div>
347347
</div>
348348
<div
349-
className="sc-iBkjds kbdJYE step-card-footer"
349+
className="sc-iBkjds kLYXXQ step-card-footer"
350350
>
351351
<div
352352
className="step-card-footer-inner"
@@ -673,7 +673,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
673673
</div>
674674
</div>
675675
<div
676-
className="sc-iBkjds kbdJYE step-card-footer"
676+
className="sc-iBkjds kLYXXQ step-card-footer"
677677
>
678678
<div
679679
className="step-card-footer-inner"
@@ -1040,7 +1040,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
10401040
</div>
10411041
</div>
10421042
<div
1043-
className="sc-iBkjds kbdJYE step-card-footer"
1043+
className="sc-iBkjds kLYXXQ step-card-footer"
10441044
>
10451045
<div
10461046
className="step-card-footer-inner"
@@ -1227,7 +1227,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
12271227
</div>
12281228
</div>
12291229
<div
1230-
className="sc-iBkjds kbdJYE step-card-footer"
1230+
className="sc-iBkjds kLYXXQ step-card-footer"
12311231
>
12321232
<div
12331233
className="step-card-footer-inner"

‎src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
106106
</div>
107107
</div>
108108
<div
109-
className="sc-hKMtZM eTQwo step-card-footer"
109+
className="sc-hKMtZM IyIWE step-card-footer"
110110
>
111111
<div
112112
className="step-card-footer-inner"
@@ -252,7 +252,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
252252
</div>
253253
</div>
254254
<div
255-
className="sc-hKMtZM eTQwo step-card-footer"
255+
className="sc-hKMtZM IyIWE step-card-footer"
256256
>
257257
<div
258258
className="step-card-footer-inner"
@@ -399,7 +399,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
399399
</div>
400400
</div>
401401
<div
402-
className="sc-hKMtZM eTQwo step-card-footer"
402+
className="sc-hKMtZM IyIWE step-card-footer"
403403
>
404404
<div
405405
className="step-card-footer-inner"
@@ -546,7 +546,7 @@ exports[`ExerciseQuestion renders Submit & continue button 1`] = `
546546
</div>
547547
</div>
548548
<div
549-
className="sc-hKMtZM eTQwo step-card-footer"
549+
className="sc-hKMtZM IyIWE step-card-footer"
550550
>
551551
<div
552552
className="step-card-footer-inner"
@@ -687,7 +687,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
687687
</div>
688688
</div>
689689
<div
690-
className="sc-hKMtZM eTQwo step-card-footer"
690+
className="sc-hKMtZM IyIWE step-card-footer"
691691
>
692692
<div
693693
className="step-card-footer-inner"
@@ -840,7 +840,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
840840
</div>
841841
</div>
842842
<div
843-
className="sc-hKMtZM eTQwo step-card-footer"
843+
className="sc-hKMtZM IyIWE step-card-footer"
844844
>
845845
<div
846846
className="step-card-footer-inner"
@@ -992,7 +992,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
992992
</div>
993993
</div>
994994
<div
995-
className="sc-hKMtZM eTQwo step-card-footer"
995+
className="sc-hKMtZM IyIWE step-card-footer"
996996
>
997997
<div
998998
className="step-card-footer-inner"
@@ -1156,7 +1156,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
11561156
</div>
11571157
</div>
11581158
<div
1159-
className="sc-hKMtZM eTQwo step-card-footer"
1159+
className="sc-hKMtZM IyIWE step-card-footer"
11601160
>
11611161
<div
11621162
className="step-card-footer-inner"
@@ -1302,7 +1302,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
13021302
</div>
13031303
</div>
13041304
<div
1305-
className="sc-hKMtZM eTQwo step-card-footer"
1305+
className="sc-hKMtZM IyIWE step-card-footer"
13061306
>
13071307
<div
13081308
className="step-card-footer-inner"
@@ -1448,7 +1448,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
14481448
</div>
14491449
</div>
14501450
<div
1451-
className="sc-hKMtZM eTQwo step-card-footer"
1451+
className="sc-hKMtZM IyIWE step-card-footer"
14521452
>
14531453
<div
14541454
className="step-card-footer-inner"

‎src/components/__snapshots__/FreeResponseInput.spec.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ exports[`Free Response Input matches snapshot 1`] = `
4242
</div>
4343
</div>
4444
<div
45-
className="sc-hKMtZM eTQwo"
45+
className="sc-hKMtZM IyIWE"
4646
>
4747
<div
4848
className="points"
@@ -125,7 +125,7 @@ exports[`Free Response Input renders leftInfoComponent component 1`] = `
125125
</div>
126126
</div>
127127
<div
128-
className="sc-hKMtZM eTQwo"
128+
className="sc-hKMtZM IyIWE"
129129
>
130130
<div
131131
className="points"
@@ -208,7 +208,7 @@ exports[`Free Response Input renders word limit error 1`] = `
208208
</div>
209209
</div>
210210
<div
211-
className="sc-hKMtZM eTQwo"
211+
className="sc-hKMtZM IyIWE"
212212
>
213213
<div
214214
className="points"

0 commit comments

Comments
 (0)