Added more instructions to initial dialog

And fixed layout squashing on intermediate sizes

And hooked up Learn More to Transcelerator help page (until this feature gets its own)

Author: josephmyers

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.html

@@ -101,11 +101,17 @@ <h2 mat-dialog-title class="dialog-icon-title">
                 <mat-card-title>{{ t("import_from_paratext") }}</mat-card-title>
                 <mat-card-content>
                   <p>{{ t("import_from_paratext_description") }}</p>
+                  <ol>
+                    @for (line of paratextInstructions; track line) {
+                      <li [innerHTML]="line"></li>
+                    }
+                  </ol>
                 </mat-card-content>
                 <mat-card-actions>
                   <button mat-flat-button color="primary" (click)="importFromParatext()">
                     {{ t("import_from_paratext") }}
                   </button>
+                  <a mat-button [href]="urls.transceleratorImportHelpPage" target="_blank">{{ t("learn_more") }}</a>
                 </mat-card-actions>
               </mat-card>
             </div>

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.scss

@@ -38,7 +38,7 @@
   display: flex;
   column-gap: 1em;
 
-  @include breakpoints.media-breakpoint-only(xs) {
+  @include breakpoints.media-breakpoint-down(md) {
     flex-direction: column;
     row-gap: 1em;
   }

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.ts

@@ -296,6 +296,13 @@ export class ImportQuestionsDialogComponent implements OnDestroy {
       .split('\n');
   }
 
+  get paratextInstructions(): string[] {
+    const importFromParatext = this.transloco.translate('import_questions_dialog.import_from_paratext');
+    return this.i18n
+      .translateAndInsertTags('import_questions_dialog.paratext_instructions', { importFromParatext })
+      .split('\n');
+  }
+
   get showDuplicateImportNote(): boolean {
     return this.filteredList.some(item => item.checked && item.sfVersionOfQuestion != null);
   }

src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/non_checking_en.json

@@ -542,6 +542,7 @@
     "transcelerator_instructions": "Translate the questions in Transcelerator.\nWithin Transcelerator, export the questions to Scripture Forge.\nSend and receive the project in Paratext.\nSync the project in Scripture Forge.\nClick {{ boldStart }}{{ importFromTranscelerator }}{{ boldEnd }} below.",
     "transcelerator_paratext": "{1}Transcelerator{2} is a plugin for {3}Paratext{4} to aid with creating and translating scripture checking questions.",
     "transcelerator_some_questions_already_imported": "Note: Some selected questions have already been imported. Questions that have been edited in Transcelerator will be updated in Scripture Forge, and exact duplicates will be skipped.",
+    "paratext_instructions": "In Paratext, open Project Properties, go to the Notes tab, and create a tag for Scripture Forge.\nUse Project Note from the Project menu to add notes with the tag you created.\nSend and receive the project in Paratext.\nSync the project in Scripture Forge.\nClick {{ boldStart }}{{ importFromParatext }}{{ boldEnd }} below to import the tagged notes.",
     "update_transcelerator": "The version of Transcelerator used in this project is not supported. Please update to at least Transcelerator version 1.5.3."
   },
   "language_codes_confirmation": {