combiner out

client/assets/styles/vbox.less

@@ -3,10 +3,10 @@
     grid-area: vbox;
     display: grid;
     grid-template-rows: 3fr 2fr;
-    grid-template-columns: 1fr 4fr 6fr;
+    grid-template-columns: 1fr 4fr 6fr 15.5em; // =\
     grid-template-areas:
-        "store-hdr store info"
-        "stash-hdr stash info";
+        "store-hdr store info combos"
+        "stash-hdr stash combiner combos";
     margin-bottom: 1em;
     line-height: 0;
 
@@ -207,26 +207,24 @@
                 "item"
                 "combiner";
 
+            .info-item {
+                grid-area: item;
+            }
+        }
+    }
+
     .combiner {
         grid-area: combiner;
-                display: flex;
-                width: 60%;
-                button {
-                    margin-top: 1em;
+        align-self: flex-end;
+        margin: 0 0.5em;
         line-height: 1.3;
         font-size: 1.25em;
         letter-spacing: 0.1em;
+        border: 2px solid @gray-exists;
         &:hover {
             border: 2px solid @gray-hover;
         }
     }
-            }
-
-
-            .info-item {
-                grid-area: item;
-            }
-        }
 
     .combos {
         display: grid;
@@ -290,7 +288,6 @@
         }
     }
 }
-}
 
 @media (min-width: 2000px) {
     .vbox {

client/src/components/vbox.component.jsx

@@ -8,6 +8,7 @@ const actions = require('../actions');
 const InfoContainer = require('./vbox.info');
 const StashElement = require('./vbox.stash');
 const StoreElement = require('./vbox.store');
+const Combiner = require('./vbox.combiner');
 
 const addState = connect(
     function receiveState(state) {
@@ -227,10 +228,6 @@ class Vbox extends preact.Component {
             <div class='vbox'>
                 {storeHdr()}
                 {stashHdr()}
-                <InfoContainer
-                    vboxHighlight={vboxHighlight}
-                    vboxBuySelected={vboxBuySelected}
-                />
                 <StoreElement
                     clearVboxSelected = {clearVboxSelected}
                     setInfo = {setInfo}
@@ -254,6 +251,12 @@ class Vbox extends preact.Component {
                     setInfo = {setInfo}
                     setVboxSelected = {setVboxSelected}
                 />
+                <div class="info"></div>
+                <Combiner
+                    vboxHighlight={vboxHighlight}
+                    vboxBuySelected={vboxBuySelected}
+                />
+                <div class="combos"></div>
             </div>
         );
     }