some css bullshit

client/assets/styles/styles.css

@@ -172,7 +172,7 @@ svg {
     height: 2em;
 }
 
-img {
+.team .avatar {
     object-fit: contain;
     max-width: 100%;
     max-height: 100%;
@@ -348,31 +348,32 @@ header {
 
 .team {
     display: grid;
-    grid-gap: 1em;
-    grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
     max-height: 100%;
 }
 
 .menu-construct {
-    border: 1px solid black;
+    margin: 0.5em;
+    flex: 1 1 auto;
 
     display: flex;
     flex-flow: column;
     text-align: center;
     justify-content: center;
 
+    border: 1px solid black;
     transition-property: border;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
 
-.menu-construct:nth-child(3n) {
-    margin-right: 0;
-}
-
-.menu-construct:first-child, .menu-construct:nth-child(4n) {
-    margin-left: 0;
+.menu-construct .avatar {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
+    height: 100%;
 }
 
 .spawn-btn.menu-construct {
@@ -400,33 +401,16 @@ header {
     opacity: 0
 }
 
-/* INSTANCE LIST */
-
 .menu-instances {
-    display: grid;
-
-    grid-template-areas:
-        "top"
-        "team"
-        "list";
-    grid-template-columns: 1fr;
-    grid-template-rows: min-content min-content 1fr;
-}
-
-.menu-instances .top {
-    grid-area: top;
+    display: flex;
+    flex-flow: column;
 }
 
 .menu-instances .construct-list {
-    grid-area: team;
-    grid-auto-columns: 1fr;
-    grid-gap: 0.5em;
-    justify-content: center;
+    flex: 1;
 }
 
 .menu-instance-list {
-    grid-area: list;
-
     flex: 1;
     order: 99;
     flex-flow: row wrap;
@@ -462,6 +446,10 @@ header {
     flex: 1 1 50%;
 }
 
+.create-form input {
+    width: 50%;
+}
+
 .create-form.disabled {
     border: 2px solid #222;
     color: #222;

client/src/components/list.jsx

@@ -2,7 +2,7 @@ const { connect } = require('preact-redux');
 const preact = require('preact');
 
 const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
-const { ConstructImg } = require('./construct');
+const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
 const InstanceCreateForm = require('./instance.create.form');
 
@@ -105,7 +105,7 @@ function List(args) {
             <div
                 key={construct.id}
                 className="menu-construct" >
-                <ConstructImg name={construct.name} id={construct.id} />
+                <ConstructAvatar name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );

client/src/components/team.jsx

@@ -6,7 +6,7 @@ const actions = require('./../actions');
 const { COLOURS } = require('./../utils');
 const { stringSort } = require('./../utils');
 const SpawnButton = require('./spawn.button');
-const { ConstructImg } = require('./construct');
+const { ConstructAvatar } = require('./construct');
 
 const idSort = stringSort('id');
 
@@ -76,7 +76,7 @@ function Team(args) {
                 className="menu-construct"
                 style={ { 'border-color': borderColour || 'whitesmoke' } }
                 onClick={() => selectConstruct(construct.id)} >
-                <ConstructImg name={construct.name} id={construct.id} />
+                <ConstructAvatar name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );