fix(subtitles): adjust styling for tile view (#3365)

- Increase z-index so the subtitles display over tiles.
- Add a background to the subtitle text.
- In general make the subtitles narrower.

css/_transcription-subtitles.scss

@@ -2,12 +2,19 @@
     bottom: 10%;
     font-size: 16px;
     font-weight: 1000;
+    left: 50%;
+    max-width: 50vw;
     opacity: 0.80;
+    pointer-events: none;
     position: absolute;
     text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
     0px 1px 1px rgba(0,0,0,0.3),
     1px 0px 1px rgba(0,0,0,0.3),
     0px 0px 1px rgba(0,0,0,0.3);
-    width: 100%;
-    z-index: $zindex2;
+    transform: translateX(-50%);
+    z-index: $filmstripVideosZ + 1;
+
+    span {
+        background: black;
+    }
 }

react/features/subtitles/components/TranscriptionSubtitles.web.js

@@ -46,7 +46,9 @@ class TranscriptionSubtitles extends Component<Props> {
                     text += stable + unstable;
                 }
                 paragraphs.push(
-                    <p key = { transcriptMessageID }> { text } </p>
+                    <p key = { transcriptMessageID }>
+                        <span>{ text }</span>
+                    </p>
                 );
             }
         }