From a9faec1d4e12b8dcfccb0cc2f291748c0d9a7b36 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 24 Nov 2019 13:08:28 +1000
Subject: [PATCH] group info and combiner css together

---
 client/assets/styles/vbox.less      | 44 +++++++++++++++++------------
 client/src/components/vbox.info.jsx |  8 ++++--
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index 434fdd7e..76416c5c 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -195,31 +195,39 @@
         margin-left: 1em;
         grid-area: info;
         display: grid;
-        grid-template-rows: min-content min-content;
         grid-template-columns: 1fr min-content;
         grid-template-areas:
-            "item combos"
-            "combiner combos";
+            "details combos";
 
-        .combiner {
-            grid-area: combiner;
-            display: flex;
-            width: 60%;
-            button {
-                margin-top: 1em;
-                line-height: 1.3;
-                font-size: 1.25em;
-                letter-spacing: 0.1em;
-                &:hover {
-                    border: 2px solid @gray-hover;
+        .info-details {
+            grid-area: details;
+            display: grid;
+            grid-template-rows: 1fr min-content;
+            grid-template-areas:
+                "item"
+                "combiner";
+
+            .combiner {
+                grid-area: combiner;
+                display: flex;
+                width: 60%;
+                button {
+                    margin-top: 1em;
+                    line-height: 1.3;
+                    font-size: 1.25em;
+                    letter-spacing: 0.1em;
+                    &:hover {
+                        border: 2px solid @gray-hover;
+                    }
                 }
             }
+
+
+            .info-item {
+                grid-area: item;
+            }
         }
 
-
-        .info-item {
-            grid-area: item;
-        }
         .combos {
             display: grid;
             grid-area: combos;
diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx
index 9ca1f3c6..f8ea6157 100644
--- a/client/src/components/vbox.info.jsx
+++ b/client/src/components/vbox.info.jsx
@@ -68,8 +68,8 @@ class InfoComponent extends preact.Component {
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
-
         if (newState.comboItem !== this.state.comboItem) return true;
+
         return false;
     }
 
@@ -301,8 +301,10 @@ class InfoComponent extends preact.Component {
         return (
             <div class='info'>
                 <div onMouseOver={() => this.setState({ comboItem: null })}>
-                    <Info />
-                    <Combiner />
+                    <div class='info-details'>
+                        <Info />
+                        <Combiner />
+                    </div>
                 </div>
                 <Combos />
             </div>