Make the cred explorer look a bit nicer (#488)

Summary:
It looks like this now:
![Screenshot](https://user-images.githubusercontent.com/4317806/42298632-d48094a0-7fbb-11e8-96dd-3d829b50adab.png)

If there is not enough space for the edge and node weights to appear
side-by-side, then they will wrap.

wchargin-branch: make-cred-explorer-nicer

src/app/credExplorer/App.js

@@ -54,7 +54,7 @@ export default class App extends React.Component<Props, State> {
     const {edgeEvaluator} = this.state;
     const {graphWithMetadata, pagerankResult} = this.state.data;
     return (
-      <div>
+      <div style={{maxWidth: "66em", margin: "0 auto", padding: "0 10px"}}>
         <header className={css(styles.header)}>
           <h1>Cred Explorer</h1>
         </header>

src/app/credExplorer/PagerankTable.js

@@ -116,7 +116,15 @@ export class PagerankTable extends React.PureComponent<Props, State> {
     }
     const topLevelFilter = this.state.topLevelFilter;
     return (
-      <table style={{borderCollapse: "collapse", marginTop: 10}}>
+      <table
+        style={{
+          borderCollapse: "collapse",
+          marginTop: 10,
+          // If we don't subtract 1px here, then a horizontal scrollbar
+          // appears in Chrome (but not Firefox). I'm not sure why.
+          width: "calc(100% - 1px)",
+        }}
+      >
         <thead>
           <tr>
             <th style={{textAlign: "left"}}>Node</th>

src/app/credExplorer/WeightConfig.js

@@ -65,7 +65,13 @@ export class WeightConfig extends React.Component<Props, State> {
   }
   render() {
     return (
-      <div style={{display: "flex", flex: 1}}>
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "space-between",
+        }}
+      >
         <EdgeConfig
           edgeWeights={this.state.edgeWeights}
           onChange={(ew) => this.setState({edgeWeights: ew}, () => this.fire())}