Fixed issue where split container with null elems woudn't use remaining size

Summary:
This fixes an issue where `Layout.Top/Right/Left/Bottom` would not render its secondary child in the remaining size, if the primary child is empty (`null`). This is caused by React not rendering anything for null children, and as a result the CSS rules for the primary child would then match the second child.

In the example below making the component tree invisible if there are no bundles in the NT/Bloks plugin. Fixed by rendering a zero sized element instead.

Reviewed By: jknoxville

Differential Revision: D27793382

fbshipit-source-id: 1e76b51986c30a6a0d98e9356fcad4dd8d5d5f91

desktop/flipper-plugin/src/ui/Layout.tsx

@@ -173,12 +173,21 @@ type SplitVerticalResizableProps =
     }
   | {};
 
+const Empty = styled.div({width: 0, height: 0});
+
 function renderSplitLayout(
   props: SplitLayoutProps,
   direction: 'column' | 'row',
   grow: 1 | 2,
 ) {
   let [child1, child2] = props.children;
+  // prevent some children to be accidentally omitted if the primary one is `null`
+  if (!child1) {
+    child1 = <Empty />;
+  }
+  if (!child2) {
+    child2 = <Empty />;
+  }
   if ('resizable' in props && props.resizable) {
     const {
       width,