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,39 +215,43 @@ function Vbox(args) {
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
-        <div className={classes} onClick={() => setReclaiming(false)} >
-            <div className="vbox-hdr">
-                <div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
-                <div className="bits" >{vbox.bits}b</div>
+        <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>
+                </div>
+                <button
+                    className="instance-btn instance-ui-btn vbox-btn"
+                    onClick={() => sendVboxDiscard()}>
+                    Reroll
+                </button>
+                <table className="vbox-table">
+                    <tbody>
+                        {freeRows}
+                    </tbody>
+                </table>
+            </div>
+            <div className='vbox-inventory' onClick={() => setReclaiming(false)} >
+                <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
+                <button
+                    className={reclaimClass}
+                    onClick={reclaimClick}>
+                    reclaim
+                </button>
+                <table className="vbox-table">
+                    <tbody>
+                        {boundRows}
+                    </tbody>
+                </table>
+                <span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
+                <button
+                    className="instance-btn instance-ui-btn vbox-btn"
+                    onClick={() => sendVboxCombine()}>
+                    refine
+                </button>
+                {combinerElement}
             </div>
-            <button
-                className="instance-btn instance-ui-btn vbox-btn"
-                onClick={() => sendVboxDiscard()}>
-                Reroll
-            </button>
-            <table className="vbox-table">
-                <tbody>
-                    {freeRows}
-                </tbody>
-            </table>
-            <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
-            <button
-                className={reclaimClass}
-                onClick={reclaimClick}>
-                reclaim
-            </button>
-            <table className="vbox-table">
-                <tbody>
-                    {boundRows}
-                </tbody>
-            </table>
-            <span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
-            <button
-                className="instance-btn instance-ui-btn vbox-btn"
-                onClick={() => sendVboxCombine()}>
-                refine
-            </button>
-            {combinerElement}
         </div>
     );
 }