group info and combiner css together

client/assets/styles/vbox.less

@@ -195,11 +195,17 @@
         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"
+            "details combos";
-            "combiner combos";
+
+        .info-details {
+            grid-area: details;
+            display: grid;
+            grid-template-rows: 1fr min-content;
+            grid-template-areas:
+                "item"
+                "combiner";
 
             .combiner {
                 grid-area: combiner;
@@ -220,6 +226,8 @@
             .info-item {
                 grid-area: item;
             }
+        }
+
         .combos {
             display: grid;
             grid-area: combos;

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,9 +301,11 @@ class InfoComponent extends preact.Component {
         return (
             <div class='info'>
                 <div onMouseOver={() => this.setState({ comboItem: null })}>
+                    <div class='info-details'>
                         <Info />
                         <Combiner />
                     </div>
+                </div>
                 <Combos />
             </div>
         );