From 6e56fa80e6939f81a16637f29224b82fcd9c2a92 Mon Sep 17 00:00:00 2001
From: Jody Clements <jody@neomorphic.co.uk>
Date: Tue, 14 May 2019 15:03:08 -0400
Subject: [PATCH] Updates css to make neuroglancer use more screen.

---
 src/components/App.css          | 29 +++--------------------------
 src/components/App.jsx          |  2 ++
 src/components/VolumeViewer.css |  2 +-
 src/components/VolumeViewer.jsx | 16 ++++++++--------
 src/index.css                   |  5 +++++
 5 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/src/components/App.css b/src/components/App.css
index c5c6e8a..eb7de60 100644
--- a/src/components/App.css
+++ b/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;
 }
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 61c16d6..9dda6f6 100644
--- a/src/components/App.jsx
+++ b/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,
diff --git a/src/components/VolumeViewer.css b/src/components/VolumeViewer.css
index c62c08a..53e8a89 100644
--- a/src/components/VolumeViewer.css
+++ b/src/components/VolumeViewer.css
@@ -1,3 +1,3 @@
 #neuroglancer-container {
-  height: 600px;
+  height: 100%;
 }
diff --git a/src/components/VolumeViewer.jsx b/src/components/VolumeViewer.jsx
index be83e94..7e7ad5f 100644
--- a/src/components/VolumeViewer.jsx
+++ b/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>
     );
   }
diff --git a/src/index.css b/src/index.css
index b4cc725..6279e00 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,4 +2,9 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  height: 100vh;
+}
+
+#root {
+  height: 100%;
 }