fix(tile-view): hidden thumbnails on scroll

css/filmstrip/_tile_view.scss

@@ -15,8 +15,9 @@
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        height: 100vh;
+        height: calc(100vh - 200px);
         width: 100vw;
+        margin: 100px 0px;
     }
 
     .filmstrip__videos .videocontainer {
@@ -77,9 +78,9 @@
         box-sizing: border-box;
         display: flex;
         flex-wrap: wrap;
-        height: 100vh;
+        margin-top: auto;
+        margin-bottom: auto;
         justify-content: center;
-        padding: 100px 0;
 
         .videocontainer {
             border: 0;

react/features/filmstrip/functions.web.js

@@ -104,8 +104,10 @@ export function calculateThumbnailSizeForTileView({
     // Minimum space to keep between the sides of the tiles and the sides
     // of the window.
     const sideMargins = 30 * 2;
+
+    const verticalMargins = visibleRows * 10;
     const viewWidth = clientWidth - sideMargins;
-    const viewHeight = clientHeight - topBottomPadding;
+    const viewHeight = clientHeight - topBottomPadding - verticalMargins;
     const initialWidth = viewWidth / columns;
     const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO;
     const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows));