refactor: Use css var to affect shadow root (#433)

Because circumventing isolation in the DOM can lead to unexpected bugs,

this commit will:
- replace one instance of such a workaround with the proper use of
  assigning values to the css var that ionic uses
  to set the relevant value on the component

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

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

app/src/Comprehension/components/ComprehensionExercise.vue

@@ -61,8 +61,7 @@ watch(
   () => store.state.showContinueButton,
   (show: boolean) => {
     if (!show) {
-      // FIX Stop any audio playing
-      // Instructions keep playing when selecting answer option
+      // BUG: Instructions should stop playing when proposing answer option #431
       if (
         currentQuestion.value >= 0 &&
         currentQuestion.value < exercise.value.questions.length - 1
@@ -99,7 +98,6 @@ watch(currentStage, (currentStage) => {
       currentExercise.value += 1;
       break;
     case STAGE.Review:
-      // BUG If multiple choice -> exercise audio plays over instruction
       store.dispatch('setShowContinueButton', true);
       break;
   }
@@ -112,8 +110,7 @@ watch(currentStage, (currentStage) => {
 });
 
 function togglePlayInstructions() {
-  // TODO: need to _properly_ suspend other potentially playing audio,
-  // while also allow to stop audio by click
+  // BUG: Needs to _properly_ suspend other potentially playing audio #431
   if (currentStage.value === STAGE.AnswerQuestions) {
     if (
       exercise.value.questions[currentQuestion.value].questionAudio?.playing

app/src/Lessons/ExerciseProvider.ts

@@ -671,7 +671,7 @@ export default class ExerciseProvider {
 
         validOptionWordSpecs.forEach((wordSpec) => {
           clozeWord.word += wordSpec.word;
-          // TODO: Handle successive audio
+          // TODO: Handle successive audio #432
           if (wordSpec.audio) {
             clozeWord.audio = this.createAudio(
               Content.getAudioData(wordSpec.audio),
@@ -832,7 +832,7 @@ export default class ExerciseProvider {
           };
           wordSpecs.forEach((wordSpec) => {
             multiClozeWord.word += wordSpec.word;
-            // TODO: Handle successive audio
+            // TODO: Handle successive audio #432
             if (wordSpec.audio) {
               multiClozeWord.audio = this.createAudio(
                 Content.getAudioData(wordSpec.audio),
@@ -980,7 +980,7 @@ export default class ExerciseProvider {
 
           wordSpecs.forEach((wordSpec) => {
             option.word += wordSpec.word;
-            // TODO: Handle successive audio
+            // TODO: Handle successive audio #432
             if (wordSpec.audio) {
               option.audio = this.createAudio(
                 Content.getAudioData(wordSpec.audio),
@@ -1024,7 +1024,7 @@ export default class ExerciseProvider {
         // we generate 2 exercises with 2 pairs, and the rest with 3 pairs
         // If the remainder when number of words are divided by 3 is 2
         // we generate 1 exercises with 2 pairs, and the rest with 3 pairs
-        // This isolates each matching exercise with unique words,
+        // This isolates matching exercise into sets of non-overlapping words,
         // which may not be desirable,
         // since mixing some new and some familiar words may increase retention
         // TODO Add configuration for exercises to overlap 0, 1 or 2 words

app/src/Matching/components/MatchingExercise.vue

@@ -258,11 +258,8 @@ ion-button {
   height: 100%;
   width: 100%;
   min-height: 4rem;
-}
-ion-button::part(native) {
-  contain: size;
-  /* TODO Use --ion-button-padding-top & --ion-button-padding-bottom instead */
-  padding: 0.5rem;
+  --padding-top: 0.5rem;
+  --padding-bottom: 0.5rem;
 }
 img {
   width: 100%;