wip

client/instance.css

@@ -3,14 +3,17 @@
 */
 
 .instance {
-    display: grid;
+    height: 100%;
+    /*display: grid;*/
     grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(11, 1fr);
+    grid-template-rows: repeat(10, 1fr);
     grid-template-areas:
         "n n n n n n n n n n n n"
         "v v v v v v v v v i i i"
         "v v v v v v v v v i i i"
         "v v v v v v v v v i i i"
+        "v v v v v v v v v i i i"
+        "e e e e e e e e e e e e"
         "e e e e e e e e e e e e"
         "c c c c c c c c c c c c"
         "c c c c c c c c c c c c"
@@ -28,18 +31,23 @@
 }
 
 .instance-info {
-    grid-area: i;
+    flex: 0 0 50%;
-    justify-self: start;
+    padding-left: 1em;
-    padding-left: 20px;
 }
 
 .instance .spacer {
     flex-grow: 1
 }
 
+.vbox-top {
+    display: flex;
+    flex: 1;
+}
+
 .vbox {
     grid-area: v;
     display: flex;
+    flex: 0 0 50%;
 }
 
 .vbox-box {
@@ -179,14 +187,13 @@
         "av av av sk sk"
         "av av av sk sk"
         "st st st st st";
-    max-height: 450px;
-    max-width: 450px;
     margin-left: 1em;
     border: 1px solid whitesmoke;
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
+    max-height: 450px;
 }
 
 .instance-cryp:first-child {
@@ -311,18 +318,15 @@
 .instance-equip {
     grid-area: e;
     display: flex;
-    justify-content: center;
 }
 
 .instance-equip .items {
     display: flex;
-    justify-content: center;
     flex: 1 1 100%;
 }
 
 .instance-equip .label {
     display: flex;
-    justify-content: center;
     font-size: 20pt;
     padding: 15px;
 

client/src/components/instance.component.jsx

@@ -53,10 +53,12 @@ function InstanceComponent(args) {
                 {actionBtn}
                 {timer}
             </div>
+            <div className="vbox-top">
                 <VboxContainer />
-            <InstanceCrypsContainer />
-            <EquipmentContainer />
                 <InfoContainer />
+            </div>
+            <EquipmentContainer />
+            <InstanceCrypsContainer />
         </section>
     );
 }

client/styles.css

@@ -2,7 +2,7 @@
     GLOBAL
 */
 
-html, body, .cryps {
+html, body, main {
     width: 100%;
     margin: 0;
 
@@ -17,9 +17,9 @@ html, body, .cryps {
     -ms-user-select: none;
 
     /* this is the sweet nectar to keep it full page*/
-    height: 99%;
+    height: 100%;
-    max-height: 99%;
+    max-height: 100%;
-    min-height: 99%;
+    min-height: 100%;
     /*padding: 0 20%;*/
 }
 
@@ -50,13 +50,20 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(10, minmax(min-content, 10%));
-    grid-template-rows: repeat(10, 1fr);
+    grid-template-rows: repeat(10, minmax(min-content, 10%));
 
     grid-template-areas:
-      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
-      "nav main main main main main main main main"
+      "nav main main main main main main main main main"
-      "ft ft ft ft   ft   ft   ft   ft   ft";
+      "nav main main main main main main main main main"
+      "nav main main main main main main main main main"
+      "nav main main main main main main main main main"
+      "nav main main main main main main main main main"
+      "nav main main main main main main main main main"
+      "nav main main main main main main main main main"
+      "nav main main main main main main main main main"
+      "ft  ft   ft   ft   ft   ft   ft   ft   ft   ft";
 }
 
 nav {
@@ -269,7 +276,7 @@ header {
     display: flex;
     flex-flow: row;
     grid-area: hd;
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
 }
 
 .header-title {