From f4a7ba65ebab33fa63a26720ee9abdb5320ee49d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 25 Nov 2019 21:46:54 +1000
Subject: [PATCH] unlock info size from store/stash divider

---
 client/assets/styles/styles.mobile.less  | 10 ++-
 client/assets/styles/vbox.less           | 84 +++++++++++++-----------
 client/src/components/vbox.component.jsx | 18 ++---
 3 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less
index c35e327b..d15b1668 100644
--- a/client/assets/styles/styles.mobile.less
+++ b/client/assets/styles/styles.mobile.less
@@ -253,7 +253,7 @@
         grid-template-areas:
             "store-hdr store-hdr stash-hdr stash-hdr"
             "store store stash stash"
-            "store store combiner combiner";
+            "store store info-combiner info-combiner";
 
         > div {
             padding: 0.25em;
@@ -267,8 +267,12 @@
             display: none;
         }
 
-        .combiner {
-            margin: 0;
+        .info-combiner {
+            .combiner {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
         }
 
         .stash {
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index b6bff59f..fbc29662 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -5,8 +5,8 @@
     grid-template-rows: 3fr minmax(min-content, 2fr);
     grid-template-columns: 1fr 4fr 6fr min-content;
     grid-template-areas:
-        "store-hdr store info combos"
-        "stash-hdr stash combiner combos";
+        "store-hdr store info-combiner combos"
+        "stash-hdr stash info-combiner combos";
     margin-bottom: 1em;
 
     // immediate children
@@ -169,48 +169,58 @@
         }
     }
 
-    .info {
-        line-height: 1.6;
+    .info-combiner {
+        grid-area: info-combiner;
+        display: grid;
+        grid-template-areas:
+            "info"
+            "combiner";
+        grid-template-rows: min-content 1fr;
 
-        h2 {
-            text-transform: uppercase;
-        }
+        .info {
+            grid-area: info;
+            line-height: 1.6;
+            height: 100%;
 
-        svg {
-            display: inline;
-            height: 1em;
-        }
+            h2 {
+                text-transform: uppercase;
+            }
 
-        figure {
-            display: inline;
-            height: 0.5em;
             svg {
-                margin-right: 0.5em;
+                display: inline;
+                height: 1em;
+            }
+
+            figure {
+                display: inline;
+                height: 0.5em;
+                svg {
+                    margin-right: 0.5em;
+                }
+            }
+
+            figcaption {
+                font-size: 1em;
+                display: inline-block;
+                vertical-align: middle;
+            }
+
+            margin-left: 1em;
+        }
+
+        .combiner {
+            grid-area: combiner;
+            margin: 1em 0.5em;
+            width: 50%;
+            line-height: 1.3;
+            font-size: 1.25em;
+            letter-spacing: 0.1em;
+            border: 0.1em solid @gray-exists;
+            &:hover {
+                border: 0.1em solid @gray-hover;
             }
         }
-
-        figcaption {
-            font-size: 1em;
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-        margin-left: 1em;
-        grid-area: info;
-    }
-
-    .combiner {
-        grid-area: combiner;
         // align-self: flex-end;
-        height: 100%;
-        margin: 0 0.5em;
-        line-height: 1.3;
-        font-size: 1.25em;
-        letter-spacing: 0.1em;
-        border: 0.1em solid @gray-exists;
-        &:hover {
-            border: 0.1em solid @gray-hover;
-        }
     }
 
     .combos {
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 90acf959..017398ee 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -223,15 +223,17 @@ class Vbox extends preact.Component {
                     vboxHighlight = {vboxHighlight}
                     vboxHover = {vboxHover}
                 />
-                <Combiner
-                    vbox={vbox}
-                    vboxCombiner={vboxCombiner}
-                    vboxSelected={vboxSelected}
-                    vboxBuySelected={vboxBuySelected}
-                    sendVboxCombine={sendVboxCombine}
-                />
+                <div class='info-combiner'>
+                    <InfoContainer />
+                    <Combiner
+                        vbox={vbox}
+                        vboxCombiner={vboxCombiner}
+                        vboxSelected={vboxSelected}
+                        vboxBuySelected={vboxBuySelected}
+                        sendVboxCombine={sendVboxCombine}
+                    />
+                </div>
                 <Combos />
-                <InfoContainer />
             </div>
         );
     }