diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 30bf2f5f0f..0bdf505eec 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 78350fee37..f821ee4ce3 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));