instance list

html-client/cryps.css

@@ -158,9 +158,28 @@ header {
 
 .instance-list {
     flex: 0 0 50%;
+    flex-flow: row wrap;
+
+    display: flex;
+    align-content: flex-start;
     height: 100%;
 }
 
+.instance-btn {
+    box-sizing: border-box;
+    flex: 1 0 20%;
+    font-size: 150%;
+    /*min-width: 20%;*/
+    border-width: 2px;
+    padding: 0.5em;
+    margin: 0.5em;
+    height: 2.5em;
+}
+
+.instance-btn.full {
+    flex: 1 0 100%;
+}
+
 /*
     INSTANCE
 */
@@ -174,14 +193,6 @@ header {
     /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
 }
 
-.instance-btn {
-    font-size: 150%;
-    min-width: 20%;
-    border-width: 2px;
-    padding: 0.5em;
-    display: block;
-}
-
 .instance-ui-btn {
     font-size: 100%;
     min-width: 100%;

html-client/src/components/instance.list.component.jsx

@@ -8,20 +8,21 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
 
     const instanceJoin = (
         <button
-            className="instance-btn right"
+            className="instance-btn full right"
             onClick={() => sendInstanceJoin()}>
             Join New Instance
         </button>
     );
 
     const instancePanels = instances.map(instance => {
-        const name = instance.instance === NULL_UUID
-            ? 'Normal Mode'
+        const globalInstance = instance.instance === NULL_UUID;
+        const name = globalInstance
+            ? 'Global Matchmaking'
             : `${instance.instance.substring(0, 5)}`;
 
         return (
             <button
-                className="instance-btn right"
+                className={`instance-btn right ${globalInstance ? 'full' : ''}`}
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
                 {name}