From 2b8a7701635b0a0dc33019fb8666a10cf538e8d2 Mon Sep 17 00:00:00 2001
From: Lyubo Marinov <lmarinov@atlassian.com>
Date: Tue, 7 Nov 2017 16:59:34 -0600
Subject: [PATCH] [RN] Consistent margins for Filmstrip and Toolbox

With the introduction of wide and narrow layouts the margins of the
Filmstrip and the Toolbox became inconsistent. For example, the
Filmstrip's top in the wide layout was nearer to the top than the
secondary Toolbar.
---
 react/features/conference/components/styles.js | 18 ++++++++++++------
 react/features/filmstrip/components/styles.js  | 13 +++++--------
 react/features/toolbox/components/styles.js    |  4 ++--
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/react/features/conference/components/styles.js b/react/features/conference/components/styles.js
index 87e7151d9..7c02a2973 100644
--- a/react/features/conference/components/styles.js
+++ b/react/features/conference/components/styles.js
@@ -1,4 +1,5 @@
 import {
+    BoxModel,
     ColorPalette,
     createStyleSheet,
     fixAndroidViewClipping
@@ -41,16 +42,21 @@ export default createStyleSheet({
     },
 
     /**
-     * The style of the view which expands over the whole conference area and
-     * splits it between both the filmstrip and the toolbox.
+     * The style of the {@link View} which expands over the whole
+     * {@link Conference} area and splits it between the {@link Filmstrip} and
+     * the {@link Toolbox}.
      */
     toolboxAndFilmstripContainer: {
-        bottom: 0,
+        bottom: BoxModel.margin,
         flexDirection: 'column',
         justifyContent: 'flex-end',
-        left: 0,
+        left: BoxModel.margin,
         position: 'absolute',
-        right: 0,
-        top: 0
+        right: BoxModel.margin,
+
+        // Both on Android and iOS there is the status bar which may be visible.
+        // On iPhone X there is the notch. In the two cases BoxModel.margin is
+        // not enough.
+        top: BoxModel.margin * 3
     }
 });
diff --git a/react/features/filmstrip/components/styles.js b/react/features/filmstrip/components/styles.js
index 5e6a1bb75..c18f56987 100644
--- a/react/features/filmstrip/components/styles.js
+++ b/react/features/filmstrip/components/styles.js
@@ -1,5 +1,5 @@
 import { Platform } from '../../base/react';
-import { BoxModel, ColorPalette } from '../../base/styles';
+import { ColorPalette } from '../../base/styles';
 
 /**
  * The base style of {@link Filmstrip} shared between narrow and wide versions.
@@ -54,10 +54,7 @@ export default {
     filmstripNarrow: {
         ...filmstrip,
         alignItems: 'flex-end',
-        height: 90,
-        marginBottom: BoxModel.margin,
-        marginLeft: BoxModel.margin,
-        marginRight: BoxModel.margin
+        height: 90
     },
 
     /**
@@ -66,10 +63,10 @@ export default {
      */
     filmstripWide: {
         ...filmstrip,
-        bottom: BoxModel.margin,
-        left: BoxModel.margin,
+        bottom: 0,
+        left: 0,
         position: 'absolute',
-        top: BoxModel.margin
+        top: 0
     },
 
     /**
diff --git a/react/features/toolbox/components/styles.js b/react/features/toolbox/components/styles.js
index 06273f558..0b42f4c61 100644
--- a/react/features/toolbox/components/styles.js
+++ b/react/features/toolbox/components/styles.js
@@ -111,8 +111,8 @@ export default createStyleSheet({
         ..._toolbar,
         bottom: 0,
         flexDirection: 'column',
-        right: BoxModel.margin,
-        top: BoxModel.margin * 2
+        right: 0,
+        top: 0
     },
 
     /**