more prog

client/cryps.css

@@ -372,16 +372,33 @@ header {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(6, 1fr);
+    grid-template-rows: repeat(7, 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"
+        "g g g g g g g g g g g g"
         "f f f f f f f f f f f f"
         "f f f f f f f f f f f f"
         "f f f f f f f f f f f f"
         "f f f f f f f f f f f f";
 }
 
+.instance-hdr {
+    gird-area: n;
+    display: flex;
+    flex-flow: row;
+
+    flex: 0 0 100%;
+}
+
+.instance-info {
+    flex: 0 0 50%;
+}
+
+.instance .spacer {
+    flex-grow: 1
+}
+
 .vbox {
     grid-area: v;
     display: grid;
@@ -408,22 +425,6 @@ header {
     flex-flow: row wrap;
 }
 
-.instance-hdr {
-    gird-area: n;
-    display: flex;
-    flex-flow: row;
-
-    flex: 0 0 100%;
-}
-
-.instance-info {
-    flex: 0 0 50%;
-}
-
-.instance .spacer {
-    flex-grow: 1
-}
-
 .menu-btn, .nav-btn {
     flex: 1 0 25%;
 }
@@ -568,10 +569,9 @@ table td svg {
     flex: 1 1 25%;
 
     display: flex;
-    flex-flow: column;
-    height: 94%;
+    flex-flow: row;
     padding: 0 2em 0 2em;
-
+    justify-content: center;
     min-width: 300px;
 
     overflow: hidden;
@@ -584,9 +584,9 @@ table td svg {
     display: flex;
     flex-flow: column;
     border: 1px solid whitesmoke;
-    margin-bottom: 1em;
+    margin-left: 1em;
     justify-content: center;
-
+    max-width: 350px;
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
@@ -595,7 +595,7 @@ table td svg {
 
 .instance-cryp-top {
     display: flex;
-    flex: 1 1 75%;
+    flex: 1 1 auto;
     width: 100%;
     justify-content: center;
     align-items: stretch;

client/src/components/instance.component.jsx

@@ -92,9 +92,11 @@ function InstanceComponent(args) {
             {timer}
             <VboxContainer />
             <InstanceCrypsContainer />
-            <InfoContainer />
         </main>
     );
 }
 
+
+// <InfoContainer /> Removed while WIP
+
 module.exports = InstanceComponent;