[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

@@ -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
+     * The style of the {@link View} which expands over the whole
-     * splits it between both the filmstrip and the toolbox.
+     * {@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,
+        right: BoxModel.margin,
-        top: 0
+
+        // 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
     }
 });

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,
+        height: 90
-        marginBottom: BoxModel.margin,
-        marginLeft: BoxModel.margin,
-        marginRight: BoxModel.margin
     },
 
     /**
@@ -66,10 +63,10 @@ export default {
      */
     filmstripWide: {
         ...filmstrip,
-        bottom: BoxModel.margin,
+        bottom: 0,
-        left: BoxModel.margin,
+        left: 0,
         position: 'absolute',
-        top: BoxModel.margin
+        top: 0
     },
 
     /**

react/features/toolbox/components/styles.js

@@ -111,8 +111,8 @@ export default createStyleSheet({
         ..._toolbar,
         bottom: 0,
         flexDirection: 'column',
-        right: BoxModel.margin,
+        right: 0,
-        top: BoxModel.margin * 2
+        top: 0
     },
 
     /**