Updates css to make neuroglancer use more screen.

src/components/App.css

@@ -1,28 +1,5 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  height: 100%;
+  display: flex;
+  flex-flow: column;
 }

src/components/App.jsx

@@ -11,6 +11,8 @@ import Navigation from '../containers/Navigation';
 import NotFound from './NotFound';
 import VolumeViewer from './VolumeViewer';
 
+import './App.css';
+
 const theme = createMuiTheme({
   palette: {
     primary: blue,

src/components/VolumeViewer.css

@@ -1,3 +1,3 @@
 #neuroglancer-container {
-  height: 600px;
+  height: 100%;
 }

src/components/VolumeViewer.jsx

@@ -11,12 +11,14 @@ import { baseurl } from '../settings';
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
-    margin: theme.spacing.unit * 2,
+    flex: '1 1 auto',
   },
   right: {
     textAlign: 'right',
   },
+  heading: {
+    padding: theme.spacing.unit * 1,
+  },
   cardTitle: {
     color: theme.palette.primary.main,
     textDecoration: 'none',
@@ -49,17 +51,15 @@ class VolumeViewer extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Grid container spacing={24} direction="column">
-          <Grid item xs={6}>
+        <Grid container spacing={24}>
+          <Grid item xs={6} className={classes.heading}>
             <Typography variant="title"><Link to={url} className={classes.cardTitle}>{match.params.name}</Link></Typography>
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={6} className={classes.heading}>
             <Typography>Branch: {match.params.branch}, Commit: {match.params.commit}</Typography>
           </Grid>
-          <Grid item xs={12}>
-            <Neuroglancer perspectiveZoom={80} viewerState={viewerState} />
-          </Grid>
         </Grid>
+        <Neuroglancer perspectiveZoom={80} viewerState={viewerState} />
       </div>
     );
   }

src/index.css

@@ -2,4 +2,9 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  height: 100vh;
+}
+
+#root {
+  height: 100%;
 }