Add overlay to the Filmstrip and scrollbar for horizontal overflow

app/lib/components/Filmstrip.jsx

@@ -48,11 +48,13 @@ class Filmstrip extends Component
 								active   : activeSpeakerName === peerName
 							})}
 						>
+							<div className='film-content'>
 								<Peer
 									advancedMode={advancedMode}
 									name={peerName}
 								/>
 							</div>
+						</div>
 					))}
 				</div>
 			</div>

app/stylus/components/Filmstrip.styl

@@ -17,17 +17,28 @@
 
   > .filmstrip {
     display: flex;
-    padding: 0.5vmin;
-    cursor: pointer;
+    background: rgba(0, 0, 0 , 0.5);
+    width: 100%;
+    overflow-x: auto;
+    padding: 1vmin 0;
 
     > .film {
       height: 15vmin;
-      margin: 1vmin;
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
+      flex-shrink: 0;        
+      padding-left: 1vmin;
+
+      &:last-child {
+        padding-right: 1vmin;
+      }
+
+      > .film-content {
+        height: 100%;
+        width: 100%;
+        border: 1px solid rgba(255,255,255,0.15);
 
         > [data-component='Peer'] {
           max-width: 15vmin * (4 / 3);
+          cursor: pointer;
 
           &.screen {
             max-width: 15vmin * (2 * 4 / 3);
@@ -44,4 +55,5 @@
         }
       }
     }
+  }
 }