new layout combiner bottom

client/src/components/vbox.component.jsx

@@ -222,7 +222,7 @@ class Vbox extends preact.Component {
             return (
                 <div class='shop'
                     onClick={e => e.stopPropagation()}>
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         <div class="vbox-colours">
                             {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
                         </div>
@@ -238,7 +238,7 @@ class Vbox extends preact.Component {
         function vboxHdr() {
             return (
                 <div class="shop-hdr">
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
                             onMouseOver={e => vboxHover(e, 'vbox')}> STORE
@@ -364,7 +364,7 @@ class Vbox extends preact.Component {
             }
             return (
                 <div class='combiner'>
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         <button
                             class='vbox-btn'
                             disabled={!mouseEvent}
@@ -392,7 +392,7 @@ class Vbox extends preact.Component {
                     onDragOver={ev => ev.preventDefault()}
                     onDrop={inventoryClick}
                 >
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
                     </div>
                 </div>
@@ -400,18 +400,24 @@ class Vbox extends preact.Component {
         }
 
         function inventoryHdr() {
+            return (
+                <div class='stash-hdr'>
+                    <div class='vbox-padding'>
+                        <h3 onTouchStart={e => e.target.scrollIntoView(true)}
+                            onMouseOver={e => vboxHover(e, 'inventory')}> STASH
+                        </h3>
+                    </div>
+                </div>
+            );
+        }
+        function refundBtn() {
             const refund = shopSelect.length === 0 && stashSelect.length === 1
                 ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
                 : 0;
             const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1;
-
             return (
-                <div class={'stash-hdr'}>
-                    <div class='items'>
-                        <h3
-                            onTouchStart={e => e.target.scrollIntoView(true)}
-                            onMouseOver={e => vboxHover(e, 'inventory')}> STASH
-                        </h3>
+                <div class='refund'>
+                    <div class='vbox-padding'>
                         <button
                             disabled={tutorialDisabled || !refund}
                             class='vbox-btn'
@@ -438,6 +444,7 @@ class Vbox extends preact.Component {
                 {inventoryHdr()}
                 {inventoryElement()}
                 {combinerBtn()}
+                {refundBtn()}
             </div>
         );
     }