Make room for multiple instances in the roster

package.nw/gt_roster.html

@@ -356,7 +356,10 @@
             </div>
           </div>
 
-          <div id="instancesDiv"></div>
+          <div id="instancesWrapper" class="secondaryControlGroup" >
+            <h3>Instances</h3>
+            <div id="instancesDiv"></div>
+          </div>
 
         </div>
       </header>

package.nw/lib/roster.js

@@ -2404,20 +2404,18 @@ function updateInstances()
         color = "purple";
       }
       worker +=
-        "<div class='button'  style='margin:1px;padding:2px;display:inline-block;background-color:" +
+        `<div class='button' style='background-color:${color};'>` +
-        color +
+        `<input type='checkbox' id='${inst}' onchange='instanceChange(this);' ` +
-        ";;border-width:1px' ><input type='checkbox' id='" +
-        inst +
-        "' onchange='instanceChange(this);' " +
         (instances[inst].crEnable ? "checked" : "") +
-        " >" +
+        `>&nbsp;${shortInst}</div>`
-        shortInst +
-        "</div>";
     }
     instancesDiv.innerHTML = worker;
-    instancesDiv.style.display = "";
+    instancesWrapper.style.display = "";
+  }
+  else {
+    instancesDiv.innerHTML = "";
+    instancesWrapper.style.display = "none";
   }
-  else instancesDiv.style.display = "none";
 }
 
 function processStatus(newMessage)

package.nw/lib/style_roster.css

@@ -325,7 +325,6 @@ body.roster {
   padding: 0;
 }
 
-
 #huntingMatrixDiv h3 {
   color: #099;
   border-bottom: 2px solid #066;
@@ -374,6 +373,33 @@ body.roster {
   padding: 2px;
 }
 
+#instancesWrapper {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  min-width: 80px;
+  max-width: 160px;
+  margin-top: 22px;
+  text-align: right;
+}
+#instancesWrapper h3 {
+  text-align: left;
+  font-size: 12px;
+  margin: 0px;
+  margin-bottom: 2px;
+  padding: 0;
+  text-align: right;
+}
+#instancesWrapper .button {
+  display: block;
+  margin: 1px;
+  padding: 2px;
+  border-width: 1px;
+  text-align: left;
+}
+
 #RosterTable > table {
   width: 100%;
 }
@@ -520,3 +546,4 @@ table.rosterTable thead th:first-child {
 .rosterTable tr:hover td {
   box-shadow: inset 0px 11px 6px -8px #888, inset 0px -11px 6px -8px #888;
 }
+