From 80e1d4a358f9a90e34552894149495a160f0f9fe Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Fri, 10 May 2019 12:38:35 +1000
Subject: [PATCH] Fitted info back in nicely

---
 client/instance.css | 53 +++++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index 18587e69..9db6bbeb 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -5,15 +5,19 @@
 .instance {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(7, 1fr);
+    grid-template-rows: repeat(11, 1fr);
     grid-template-areas: 
-        "n v v v v v v v v v v v"
-        "n v v v v v v v v v v v"
-        "x x g g g g g g g g g g"
-        "x x f f f f f f f f f f"
-        "x x f f f f f f f f f f"
-        "x x f f f f f f f f f f"
-        "x x f f f f f f f f f f";
+        "n v v v v v v v x x x x"
+        "n v v v v v v v x x x x"
+        "n v v v v v v v x x x x"
+        "n v v v v v v v x x x x"
+        "g g g g g g g g x x x x"
+        "g g g g g g g g x x x x"
+        "f f f f f f f f x x x x"
+        "f f f f f f f f x x x x"
+        "f f f f f f f f x x x x"
+        "f f f f f f f f x x x x"
+        "f f f f f f f f x x x x";
 }
 
 .instance-hdr {
@@ -25,9 +29,24 @@
 
 .instance-info {
     grid-area: x;
+    justify-self: start;
     flex: 0 0 50%;
 }
 
+
+.instance-cryp-list {
+    grid-area: f;
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row;
+    padding: 0 2em 0 2em;
+    justify-content: center;
+    min-width: 300px;
+
+    overflow: hidden;
+}
+
+
 .instance .spacer {
     flex-grow: 1
 }
@@ -39,7 +58,7 @@
     grid-template-rows: repeat(2, 1fr);
     grid-template-areas: 
         "vb vb vb vb vb . i i i i i"
-        "vb vb vb vb vb . i i i i i"
+        "vb vb vb vb vb . i i i i i";
 }
 
 .vbox-box {
@@ -174,28 +193,14 @@ table td svg {
     flex: 1 0 25%;
 }
 
-.instance-cryp-list {
-    grid-area: f;
-    flex: 1 1 25%;
-
-    display: flex;
-    flex-flow: row;
-    padding: 0 2em 0 2em;
-    justify-content: center;
-    min-width: 300px;
-
-    overflow: hidden;
-}
-
 /* CRYP BOX */
 .instance-cryp {
-    flex: 1 1 100%;
+    flex: 1 1 auto;
 
     display: flex;
     flex-flow: column;
     border: 1px solid whitesmoke;
     margin-left: 1em;
-    justify-content: center;
     max-width: 350px;
     transition-property: all;
     transition-duration: 0.5s;