group colours together in table, fix the vertical spacing issue

client/src/components/info.component.jsx

@@ -147,19 +147,27 @@ class InfoComponent extends preact.Component {
             const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
             if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
 
+            const comboTable = vboxCombos.map((c, i) => {
+                const mouseOver = e => {
+                    e.stopPropagation();
+                    this.setState({ comboItem: c.item });
+                };
+                const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
+                    ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
+                        <div key="1">{convertItem(c.components[2])}</div>]
+                    : c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
+                return (
+                    <div key={i} onMouseOver={mouseOver} class="table-button" onClick={() => setInfo(c.item)}>
+                        <div class="item">
+                            {convertItem(c.item)}
+                        </div>
+                        {componentTable}
+                    </div>
+                );
+            });
             return (
                 <div class="combos">
-                    {vboxCombos.map((c, i) =>
-                        <div class="table-button"
-                            onMouseOver={e => {
-                                e.stopPropagation();
-                                this.setState({ comboItem: c.item });
-                            }}
-                            onClick={() => setInfo(c.item)}>
-                                <div class="item">{convertItem(c.item)}</div>
-                                {c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>)}
-                        </div>
-                    )}
+                    {comboTable}
                 </div>
             );
         };

client/src/components/instance.constructs.jsx

@@ -238,7 +238,7 @@ function Construct(props) {
         </div>;
     });
 
-    const classes = `instance-construct`;
+    const classes = 'instance-construct';
     const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     return (
         <div key={construct.id} class={classes} onClick={onClick} onDragOver={ev => ev.preventDefault()} onDrop={onClick}>

client/src/components/instance.ctrl.btns.jsx

@@ -17,16 +17,11 @@ const addState = connect(
             return ws.sendInstanceReady(instance.id);
         }
 
-        function sendAbandon() {
-            return ws.sendInstanceAbandon(instance.id);
-        }
-
         return {
             instance,
             chatShow,
             account,
 
-            sendAbandon,
             sendReady,
         };
     },
@@ -48,7 +43,6 @@ function InstanceCtrlBtns(args) {
         chatShow,
         account,
 
-        sendAbandon,
         sendReady,
         setChatShow,
     } = args;