From 145596ac6a48e0936264a21cf25892044028f80e Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Wed, 1 Apr 2020 17:20:43 -0500
Subject: [PATCH] fix(tile-view): hidden thumbnails on scroll

---
 css/filmstrip/_tile_view.scss             | 7 ++++---
 react/features/filmstrip/functions.web.js | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss
index 30bf2f5f0..0bdf505ee 100644
--- a/css/filmstrip/_tile_view.scss
+++ b/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;
diff --git a/react/features/filmstrip/functions.web.js b/react/features/filmstrip/functions.web.js
index 78350fee3..f821ee4ce 100644
--- a/react/features/filmstrip/functions.web.js
+++ b/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));