fix: image size

Author: nicoalee

src/app/pages/tasks/task-playables/task-display/task-display.component.html

@@ -4,7 +4,7 @@
     </div>
     <div
         class="display-instructions overflow-scrollable {{
-            timerMode && showTimer && timerPlacement.includes('top') ? 'pad-top' : ''
+            !timerMode || !showTimer ? '' : timerPlacement.includes('top') ? 'pad-top' : 'pad-bottom'
         }}"
     >
         <div>
@@ -29,6 +29,7 @@ <h3 *ngIf="subtitle" class="subtitle" [innerHTML]="subtitle"></h3>
                         section.sectionType === 'image-horizontal' ||
                         section.sectionType === 'image-square' ||
                         section.sectionType === 'image-small' ||
+                        section.sectionType === 'image-medium' ||
                         section.sectionType === 'image-fill'
                     "
                 >

src/app/pages/tasks/task-playables/task-display/task-display.component.scss

@@ -76,7 +76,11 @@
     flex-direction: column;
 
     &.pad-top {
-        margin-top: 4%;
+        margin-top: calc(48px + 2%);
+    }
+
+    &.pad-bottom {
+        margin-bottom: calc(48px + 2%);
     }
 
     .title {
@@ -99,6 +103,11 @@
             width: 50px;
             margin-bottom: 20px;
         }
+
+        .image-medium {
+            width: 390px;
+            margin-bottom: 20px;
+        }
     }
 
     @include for-small-device-only {