cryp list

html-client/cryps.css

@@ -25,9 +25,22 @@ html {
   box-sizing: inherit;
 }
 
+h2 {
+    font-size: 2em;
+}
+
+
 /* main container */
 .cryps {
     padding: 0 2em;
+    position: fixed;
+    display: flex;
+    flex-flow: column;
+}
+
+main {
+    display: flex;
+    flex-flow: row wrap;
 }
 
 button, input {
@@ -95,38 +108,6 @@ header {
     background-color: black;
 }
 
-.menu-cryps {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: stretch;
-    justify-content: flex-end;
-}
-
-.menu-cryp-ctr {
-    flex: 0 1 33%;
-    text-align: center;
-}
-
-.menu-cryp {
-    height: 100%;
-    margin: 0.5em;
-    box-sizing: border-box;
-    border: 1px solid black;
-
-    transition-property: border;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-}
-
-.background {
-    min-height: 100%;
-    min-width: 100%;
-    position: absolute;
-    z-index: -1000;
-    background-color: #000000
-}
-
 .login {
     display: inline;
     margin-right: 0;
@@ -148,6 +129,38 @@ header {
     }
 }
 
+.menu-cryps {
+    display: flex;
+    flex-flow: row wrap;
+
+    flex: 1 0 50%;
+}
+
+.menu-cryp-ctr {
+    flex: 0 0 33%;
+    flex-flow: column;
+
+    text-align: center;
+    display: flex;
+}
+
+.menu-cryp {
+    height: 100%;
+    margin: 0.5em;
+    box-sizing: border-box;
+    border: 1px solid black;
+
+    transition-property: border;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+}
+
+.instance-list {
+    flex: 0 0 50%;
+    height: 100%;
+}
+
 /*
     INSTANCE
 */

html-client/src/components/body.component.jsx

@@ -39,16 +39,10 @@ function renderBody(props) {
     }
 
     return (
-        <div>
+        <main>
-            <section className="row" >
+            <CrypListContainer />
-                <div className="six columns">
+            <InstanceListContainer />
-                    <CrypListContainer />
+        </main>
-                </div>
-                <div className="six columns">
-                    <InstanceListContainer />
-                </div>
-            </section>
-        </div>
     );
 }
 

html-client/src/components/instance.list.component.jsx

@@ -30,7 +30,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
     });
 
     return (
-        <section>
+        <section className="instance-list" >
             <h2>Instances</h2>
             {instanceJoin}
             {instancePanels}