diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 716ba6c1..3c677937 100644
--- a/client/assets/styles/instance.less
+++ b/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;
- }
+
}
}
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 4529f513..b4c116eb 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -151,17 +151,18 @@ class InfoComponent extends preact.Component {
{vboxCombos.map((c, i) =>
-
- | {
- e.stopPropagation();
- this.setState({ comboItem: c.item });
- }}
- onClick={() => setInfo(c.item)}
- > {convertItem(c.item)} |
+
+ {
+ e.stopPropagation();
+ this.setState({ comboItem: c.item });
+ }}
+ onClick={() => setInfo(c.item)}
+ > {convertItem(c.item)}
- {c.components.map((u, j) => {convertItem(u)} | )}
-
+ {c.components.map((u, j) => {convertItem(u)} )}
+
+ |
)}