table layout wip

client/assets/styles/instance.less

@@ -36,8 +36,19 @@
     grid-area: info;
     font-size: 85%;
 
+    display: grid;
+    font-size: 85%;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas:
+        "item"
+        "combos";
+    // flex-flow: column;
+    // white-space: pre-wrap;
+
+    flex-direction: column;
     .info-item {
-        margin: 0 0 1em 1em;
+        flex: 1;
+        margin: 0 0 0 1em;
     }
 }
 
@@ -59,13 +70,16 @@
     }
 }
 
-.instance .info-item {
-    grid-area: item;
-}
-
 .instance .combos {
-    grid-area: combos;
-    margin: 0 0 0 1em;
+    margin: 0 0 1em 1em;
+
+    table {
+        tr {
+            svg {
+                height: 1em;
+            }
+        }
+    }
 
     td.table-button {
         padding:5px;
@@ -75,9 +89,7 @@
             color: whitesmoke;
             background-color: @gray-hover;
         }
-        svg {
-            height: 1em;
-        }
+
     }
 }
 

client/src/components/info.component.jsx

@@ -151,17 +151,18 @@ class InfoComponent extends preact.Component {
                 <table class="combos">
                     <tbody>
                         {vboxCombos.map((c, i) =>
-                            <tr key={i}>
-                                <td class="table-button"
-                                    onMouseOver={e => {
-                                        e.stopPropagation();
-                                        this.setState({ comboItem: c.item });
-                                    }}
-                                    onClick={() => setInfo(c.item)}
-                                > {convertItem(c.item)} </td>
+                            <td><table>
+                                    <tr class="table-button"
+                                        onMouseOver={e => {
+                                            e.stopPropagation();
+                                            this.setState({ comboItem: c.item });
+                                        }}
+                                        onClick={() => setInfo(c.item)}
+                                    > {convertItem(c.item)} </tr>
 
-                                {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
-                            </tr>
+                                    {c.components.map((u, j) => <tr key={j} >{convertItem(u)}</tr>)}
+                                </table>
+                            </td>
                         )}
                     </tbody>
                 </table>