style video recording section

Summary: style video recording section

Reviewed By: jknoxville

Differential Revision: D18658103

fbshipit-source-id: 450ed1e3a1ee4330183f14b2c00486649087c3bb

src/ui/components/Bordered.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import styled from 'react-emotion';
+import {colors} from './colors';
+
+/**
+ * Puts a gray border around something
+ */
+const Bordered = styled('div')({
+  borderRadius: 4,
+  overflow: 'hidden',
+  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
+  backgroundColor: colors.white,
+  display: 'flex',
+});
+Bordered.displayName = 'bordered';
+
+export default Bordered;

src/ui/components/Labeled.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import Label from './Label';
 import VBox from './VBox';
+import FlexColumn from './FlexColumn';
 
 /**
  * Vertically arranged section that starts with a label and includes standard margins
@@ -17,7 +18,7 @@ import VBox from './VBox';
 const Labeled: React.FC<{title: string}> = ({title, children}) => (
   <VBox>
     <Label style={{marginBottom: 6}}>{title}</Label>
-    {children}
+    <FlexColumn>{children}</FlexColumn>
   </VBox>
 );
 

src/ui/components/table/ManagedTable.tsx

@@ -626,7 +626,9 @@ export class ManagedTable extends React.Component<
         highlighted={highlightedRows.has(rows[index].key)}
         row={rows[index]}
         index={index}
-        style={style}
+        style={
+          rows[index].height ? {...style, height: rows[index].height} : style
+        }
         onAddFilter={onAddFilter}
         zebra={zebra}
       />