From eb85155605b1e9a538fef282b34f1c409bb96cec Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 2 Apr 2019 12:26:25 +1100
Subject: [PATCH] instance list

---
 html-client/cryps.css                         | 27 +++++++++++++------
 .../components/instance.list.component.jsx    |  9 ++++---
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/html-client/cryps.css b/html-client/cryps.css
index f16ad6f4..b155d254 100755
--- a/html-client/cryps.css
+++ b/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%;
diff --git a/html-client/src/components/instance.list.component.jsx b/html-client/src/components/instance.list.component.jsx
index 24d832d6..105762e8 100644
--- a/html-client/src/components/instance.list.component.jsx
+++ b/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}