Fixed wrong modal layout

src/app/_components/modal/modal.component.html

@@ -1,5 +1,5 @@
 <div id="modal-container" *ngIf="isVisible()">
-    <div class="modal-dialog">
+    <div class="modal-dialog p-4">
         <div class="modal-content">
             <!--<div class="modal-header">
                 <h3 class="modal-title mb-0">{{ modal.messageHead }}</h3>

src/app/_components/modal/modal.component.scss

@@ -3,10 +3,15 @@
     z-index: 1000;
     right: 0;
     left: 0;
+    background-color: white;
+    top: 10%;
+
+    display: flex;
 }
 
 .modal-dialog {
     -webkit-box-shadow: 0px 5px 17px 0px rgba(0,0,0,0.67); 
     box-shadow: 0px 5px 17px 0px rgba(0,0,0,0.67);
     border-radius: .3rem;
+    max-width: 75%;
 }

src/index.html

@@ -64,13 +64,13 @@
       "homeButton":"Weiter",
       "introductionInstruction":"<p>Wie es funktioniert?</p><p>Schieben Sie die K\u00e4rtchen auf die drei Stapel unten.</p>",
       "introductionButton":"Weiter",
-      "step1Instruction":"<p>Schritt 1 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.{br}{br}You can either drag the cards into one of the three piles or {b}press 1, 2, 3{/b} on your keyboard. Changes can be made later.{br}{br}If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
+      "step1Instruction":"<p>Schritt 1 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.<br><br>You can either drag the cards into one of the three piles or <b>press 1, 2, 3</b> on your keyboard. Changes can be made later.<br><br>If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
       "step1Button":"Weiter",
-      "step2Instruction":"<p>Schritt 1 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.{br}{br}You can either drag the cards into one of the three piles or {b}press 1, 2, 3{/b} on your keyboard. Changes can be made later.{br}{br}If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
+      "step2Instruction":"<p>Schritt 2 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.<br><br>You can either drag the cards into one of the three piles or <b>press 1, 2, 3</b> on your keyboard. Changes can be made later.<br><br>If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
       "step2Button":"Weiter",
-      "step3Instruction":"<p>Schritt 1 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.{br}{br}You can either drag the cards into one of the three piles or {b}press 1, 2, 3{/b} on your keyboard. Changes can be made later.{br}{br}If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
+      "step3Instruction":"<p>Schritt 3 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.<br><br>You can either drag the cards into one of the three piles or <b>press 1, 2, 3</b> on your keyboard. Changes can be made later.<br><br>If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
       "step3Button":"Weiter",
-      "step4Instruction":"<p>Schritt 1 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.{br}{br}You can either drag the cards into one of the three piles or {b}press 1, 2, 3{/b} on your keyboard. Changes can be made later.{br}{br}If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
+      "step4Instruction":"<p>Schritt 4 of 4</p><p>            Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.<br><br>You can either drag the cards into one of the three piles or <b>press 1, 2, 3</b> on your keyboard. Changes can be made later.<br><br>If you want to read this instruction a second time, press the help-button at the bottom left corner.</p>",
       "step4Button":"Weiter",
 
       "step4UnfinishedText": "4 beenden!",