rework status bar layout

- floats -> Flexbox
- align to content width

js/src/views/Application/Status/status.css

@@ -20,19 +20,16 @@
   left: 0;
   right: 0;
   z-index: 1000;
+  display: flex;
+  align-items: center;
   padding: .4em .5em;
   font-size: x-small;
   color: #ccc;
   background-color: rgba(0, 0, 0, 0.8);
 }
 
-.title {
-  margin: 0 0.5em 0 2em;
-}
-
 .enode {
   word-wrap: break-word;
-  float: right;
 }
 
 .enode > * {
@@ -40,25 +37,24 @@
   margin: 0.25em 0.5em;
   vertical-align: top;
 }
-
-.block {
+.enode > :last-child {
+  margin-right: 0;
 }
 
 .netinfo {
   display: flex;
+  flex-grow: 1;
   align-items: center;
   color: #ddd;
 }
 
 .netinfo > * {
-  display: inline-block;
   margin-left: 1em;
 }
 
 .network {
   padding: 0.25em 0.5em;
-  display: inline-block;
-  border-radius: 4px;
+  border-radius: .4em;
   line-height: 1.2;
   text-transform: uppercase;
 }
@@ -70,14 +66,3 @@
 .networktest {
   background: rgb(136, 0, 0);
 }
-
-.peers {
-}
-
-.version {
-  padding: 0.25em 0.5em;
-  float: left;
-}
-
-.syncing {
-}

js/src/views/Application/Status/status.js

@@ -46,7 +46,6 @@ class Status extends Component {
         <div className={ styles.version }>
           { clientVersion }
         </div>
-        { this.renderEnode() }
         <div className={ styles.netinfo }>
           <BlockStatus />
           <div className={ netStyle }>
@@ -56,6 +55,7 @@ class Status extends Component {
             { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
           </div>
         </div>
+        { this.renderEnode() }
       </div>
     );
   }