getting somewhere

client/cryps.css

@@ -369,12 +369,47 @@ header {
 */
 
 .instance {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: repeat(6, 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"
+        "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";
+}
+
+.vbox {
+    grid-area: v;
+    display: grid;
+    grid-template-columns: repeat(11, 1fr);
+    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"
+}
+
+.vbox-box {
+    grid-area: vb;
+    justify-self: end;
+    max-width: 600px;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.vbox-inventory {
+    grid-area: i;
+    justify-self: start;
+    max-width: 600px;
     display: flex;
     flex-flow: row wrap;
-    align-content: flex-start;
 }
 
 .instance-hdr {
+    gird-area: n;
     display: flex;
     flex-flow: row;
 
@@ -463,15 +498,6 @@ button[disabled] {
     box-shadow: inset 0.5em 0 0 0 #a52a2a;
 }
 
-.vbox {
-    flex: 1 1 25%;
-
-    display: flex;
-    flex-flow: row wrap;
-    align-content: flex-start;
-    min-width: 250px;
-}
-
 .vbox-hdr {
     display: flex;
     align-items: flex-end;
@@ -538,6 +564,7 @@ table td svg {
 }
 
 .cryp-list {
+    grid-area: f;
     flex: 1 1 25%;
 
     display: flex;

client/src/components/vbox.component.jsx

@@ -215,7 +215,8 @@ function Vbox(args) {
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
-        <div className={classes} onClick={() => setReclaiming(false)} >
+        <div className={classes}>
+            <div className='vbox-box' onClick={() => setReclaiming(false)} >
                 <div className="vbox-hdr">
                     <div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
                     <div className="bits" >{vbox.bits}b</div>
@@ -230,6 +231,8 @@ function Vbox(args) {
                         {freeRows}
                     </tbody>
                 </table>
+            </div>
+            <div className='vbox-inventory' onClick={() => setReclaiming(false)} >
                 <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
                 <button
                     className={reclaimClass}
@@ -249,6 +252,7 @@ function Vbox(args) {
                 </button>
                 {combinerElement}
             </div>
+        </div>
     );
 }