From 9b13f3d5bd4727278c0985bde052ab7fa272f213 Mon Sep 17 00:00:00 2001
From: William Chargin <wchargin@gmail.com>
Date: Thu, 5 Jul 2018 12:02:17 -0700
Subject: [PATCH] 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           |  2 +-
 src/app/credExplorer/PagerankTable.js | 10 +++++++++-
 src/app/credExplorer/WeightConfig.js  |  8 +++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/credExplorer/App.js b/src/app/credExplorer/App.js
index 8bb955a..53c43d7 100644
--- a/src/app/credExplorer/App.js
+++ b/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>
diff --git a/src/app/credExplorer/PagerankTable.js b/src/app/credExplorer/PagerankTable.js
index d8790e5..5ac76eb 100644
--- a/src/app/credExplorer/PagerankTable.js
+++ b/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>
diff --git a/src/app/credExplorer/WeightConfig.js b/src/app/credExplorer/WeightConfig.js
index bf7c832..e363cdd 100644
--- a/src/app/credExplorer/WeightConfig.js
+++ b/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())}