fix: Contain matching exercise within comprehension exercise

Because we want to keep information on screen
so that users won't have to scroll
(as long as the content can be kept at a legible size regardless)

this commit will:
- change the styling of the matching exercise
  to ensure it stays contained within its designated area
  when displayed within a comprehension exercise

**Certification**
- [X] I certify that <!-- Check the box to certify: [X] -->
- I have read the [contributing guidelines](
  https://github.com/nodepa/seedlingo/blob/main/.github/CONTRIBUTING.md)
- I license these contributions to the public under Seedlingo's
  [LICENSE](https://github.com/nodepa/seedlingo/blob/main/LICENSE.md)
  and have the rights to do so.

Signed-off-by: toshify <4579559+toshify@users.noreply.github.com>

app/src/Matching/components/MatchingExercise.vue

@@ -208,13 +208,13 @@ function getSpacing(itemCount: number, index: number): string {
 </script>
 
 <template>
-  <ion-grid fixed>
-    <ion-row class="ion-justify-content-center">
+  <ion-grid fixed style="max-height: 100%">
+    <ion-row class="ion-justify-content-center" style="height: 100%">
       <ion-col
         v-for="(option, index) in exerciseItems"
         :key="index"
         size="6"
-        :style="`width: 100%; height: calc((100vh - 6.625rem - 0.75rem) / ${exerciseItems.length / 2}); padding: 0.5rem;`"
+        :style="`width: 100%; height: calc(100% / ${exerciseItems.length / 2});  padding: 0.5rem;`"
       >
         <ExerciseButton
           v-model:buzzing="option.buzzing"

app/src/views/ReviewSession.vue

@@ -79,7 +79,7 @@ onMounted(() => {
               margin: 0rem;
             "
           >
-            <ion-card-header v-if="word.picture && word.picture.length > 0" >
+            <ion-card-header v-if="word.picture && word.picture.length > 0">
               <img
                 data-test="review-picture"
                 :src="Content.getPicPath(word.picture)"