@pocketprep/ui-kit 3.4.80 → 3.4.82

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -107,6 +107,11 @@
                 </div>
                 <div
                     class="uikit-question-choices-container__choice-text"
+                    :class="{
+                        'uikit-question-choices-container__choice-text--review-mode':
+                            reviewMode,
+                    }"
+                    v-breakpoint:questionEl="breakpoints"
                     :tabindex="showAnswers ? -1 : 0"
                     :role="isMCR
                         ? 'checkbox'
@@ -741,6 +746,10 @@ export default class ChoicesContainer extends Vue {
 
     &__choice-text {
         outline: none;
+
+        &--review-mode#{&}--mobile  {
+            max-width: 285px;
+        }
     }
 
     &__toggle-explanation {

package/lib/components/Quiz/Question/MatrixChoicesContainer.vue

@@ -470,7 +470,7 @@ export default class MatrixChoicesContainer extends Vue {
         padding: 0px 1px 0px 14px;
         align-items: flex-end;
         width: 100%;
-        height: 32px;
+        height: fit-content;
         margin-bottom: 16px;
         color: $brand-black;
         font-size: 12px;

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -46,6 +46,10 @@
                     />
                     <div 
                         class="uikit-question-mobile-matrix-choices-container__row-label"
+                        :class="{
+                            'uikit-question-mobile-matrix-choices-container__row-label--review-mode':
+                                showMatrixAnswers || reviewMode,
+                        }"
                         v-dark="isDarkMode"
                     >
                         {{ stripHtmlTags(rowLabel) }}
@@ -547,7 +551,8 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
 .uikit-question-mobile-matrix-choices-container {
     width: 100%;
-    max-width: 325px;
+    max-width: 492px;
+
     &:not(&--mobile) {
         display: none
     }
@@ -635,6 +640,8 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     &__row-label-correct-icon {
         color: $cadaverous;
+        width: 18px;
+        height: 18px;
 
         &--dark {
             color: $jungle-green;
@@ -660,9 +667,15 @@ export default class MobileMatrixChoicesContainer extends Vue {
         &--dark {
             color: $barely-background;
         }
+
+        &--review-mode {
+            width: 285px;
+        }
     }
 
     &__toggle-row-icon {
+        position: absolute;
+        margin-top: 8px;
         margin-left: 8px;
         color: $brand-blue;
 
@@ -728,12 +741,13 @@ export default class MobileMatrixChoicesContainer extends Vue {
     &__checkbox-label {
         &--distractor {
             text-decoration: line-through;
+            color: $ash;
         }
     }
 
     &__radio-btns {
         width: 100%;
-        max-width: 345px;
+        max-width: 492px;
     }
 }
 </style>

package/lib/components/Quiz/Question/MobileMatrixRadioGroup.vue

@@ -110,7 +110,7 @@ const stripHtmlTags = (string?: string) => {
         align-items: flex-start;
         align-self: stretch;
         padding: 11px 15px 12px 15px;
-        max-width: 325px;
+        max-width: 492px;
         border: 0.5px solid rgba($pewter, 0.85);
         border-top: none;
     }
@@ -131,6 +131,7 @@ const stripHtmlTags = (string?: string) => {
 
         &--distractor {
             text-decoration: line-through;
+            color: $ash
         }
     }
 }

package/lib/components/Quiz/Question/Summary.vue

@@ -5,6 +5,7 @@
         ref="uikit-question-summary"
         class="uikit-question-summary"
         :class="{
+            'uikit-question-summary--matrix-question': isMatrixQuestion,
             'uikit-question-summary--matrix-question-review-mode': isMatrixQuestion && reviewMode,
         }"
     >
@@ -209,6 +210,10 @@ export default class Summary extends Vue {
         box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
     }
 
+    &--matrix-question {
+        max-width: 518px;
+    }
+
     &--matrix-question-review-mode#{&}--tablet-landscape {
         display: inline-block;
     }
@@ -239,6 +244,8 @@ export default class Summary extends Vue {
     }
 
     &__summary-toggle-explanation-icon {
+        position: absolute;
+        margin-top: 4px;
         margin-left: 5px;
         display: none;
 

package/lib/components/Quiz/Question.vue

@@ -31,6 +31,7 @@
                 'uikit-question__main--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
                 'uikit-question__main--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                 'uikit-question__main--mcr': isMCR,
+                'uikit-question__main--mcr-review-mode': isMCR && reviewMode,
                 'uikit-question__main--matrix-question-review-mode': isMatrixQuestion && reviewMode,
             }"
         >
@@ -1590,6 +1591,16 @@ export default class Question extends Vue {
             width: 100%;
             padding-right: 42px;
         }
+
+        &--matrix-question-review-mode#{&}--mobile {
+            overflow-y: scroll;
+        }
+
+        &--mcr-review-mode#{&}--mobile {
+            overflow-y: scroll;
+            width: 100%;
+            padding-right: 17px;
+        }
     }
 
     &__right-side {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.80",
+  "version": "3.4.82",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {