From 87c010a9bdbecfca8d27a00ec2c5c141c91eca18 Mon Sep 17 00:00:00 2001
From: virtuacoplenny <leonard.h.kim@gmail.com>
Date: Tue, 14 Aug 2018 17:44:21 -0700
Subject: [PATCH] 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                     | 11 +++++++++--
 .../components/TranscriptionSubtitles.web.js          |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/css/_transcription-subtitles.scss b/css/_transcription-subtitles.scss
index b55a03bd37..fdd641aaee 100644
--- a/css/_transcription-subtitles.scss
+++ b/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;
+    }
 }
diff --git a/react/features/subtitles/components/TranscriptionSubtitles.web.js b/react/features/subtitles/components/TranscriptionSubtitles.web.js
index 0f883959f6..28b1dcc466 100644
--- a/react/features/subtitles/components/TranscriptionSubtitles.web.js
+++ b/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>
                 );
             }
         }