toggle workign wip

client/assets/styles/instance.mobile.css

@@ -1,19 +1,45 @@
 @media (max-height: 800px), (max-width: 800px) {
     .instance {
         display: grid;
-        grid-template-columns: 1fr;
+        grid-template-columns: 100%;
-        grid-template-rows: min-content;
+        grid-template-rows: min-content min-content min-content min-content;
         grid-template-areas:
             "top"
-            "vbox"
+            "controls"
+            "first"
+            "second"
     }
 
     .instance .equip { display: none; }
     .instance .info { display: none; }
     .instance .cryp-list { display: none; }
+     #toggle-vbox-label {
+        text-align: center;
+        border: 2px solid #555;
+     }
+     #toggle-vbox-label:after{
+        content: "Cryps";
+    }
+
+    #toggle-vbox:checked ~ #toggle-vbox-label:after{
+        content: "Vbox";
+    }
+
+    #toggle-vbox:checked ~ .vbox { display: none; }
+    #toggle-vbox:checked ~ .cryp-list { 
+        display: initial; 
+        grid-area: second;
+    }
+    #toggle-vbox:checked ~ .equip { 
+        display: initial;
+        grid-area: first;
+    }
+
+
+
 
     .vbox {
-        grid-area: vbox;
+        grid-area: first;
         display: grid;
         grid-template-rows: min-content min-content min-content;
         grid-template-columns: 1fr;
@@ -28,9 +54,20 @@
     }
 
     .vbox-combiner {
-        grid-area: combiner;
+        margin-left: 0;
+    }
+
+    #toggle-vbox { display: none; }
+
+    #toggle-vbox-label {
+        grid-area: controls;
+        color: whitesmoke;
+        line-height: 1.75em;
+        font-size: 1.5em;
+        display: block;
+        cursor: pointer;
+        margin-right: 0.5em;
     }
 
 
-
 }

client/src/components/instance.component.jsx

@@ -53,6 +53,9 @@ function InstanceComponent(args) {
                 {actionBtn}
                 {timer}
             </div>
+
+            <input type="checkbox" id="toggle-vbox"/>
+            <label id="toggle-vbox-label" htmlFor="toggle-vbox">&nbsp;</label>
             <VboxContainer />
             <InfoContainer />
             <EquipmentContainer />