Namespace select bar width fix

Author: nikitaeverywhere

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cache-visual-editor",
   "printableName": "Cache Visual Editor",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Visual class editor for InterSystems Caché",
   "main": "index.js",
   "keywords": [

source/client/index.html

@@ -19,7 +19,7 @@
                 <div class="medium menu icon"></div>
                 <div class="medium back icon" id="backButton"></div>
                 <span class="title">
-                    <select id="topNamespace">
+                    <select id="topNamespace" class="topNamespace">
                         <option>Loading...</option>
                     </select><span id="topTitle"></span>
                 </span>

source/client/js/classEditor/index.js

@@ -34,12 +34,30 @@ let backButton = onInit(() => {
             if (ns === data["namespace"]) c.setAttribute("selected", "true");
             topNamespace.appendChild(c);
         }
+        updateHeaderNamespaceWidth(NAMESPACE);
         topNamespace.addEventListener("change", (e) => {
             NAMESPACE = (e.target || e.srcElement).value;
+            updateHeaderNamespaceWidth(NAMESPACE);
             loadLevel("");
         });
     });
 
+/**
+ * This function uses a bit of trick to compute the width of the namespace element in header, but it
+ * does its job.
+ * @param {string} namespace
+ */
+function updateHeaderNamespaceWidth (namespace) {
+    let temp = block("select", "topNamespace"),
+        t2 = block("option");
+    t2.setAttribute("selected", "true");
+    t2.textContent = namespace;
+    temp.appendChild(t2);
+    topNamespace.parentNode.appendChild(temp);
+    topNamespace.style.width = temp.offsetWidth + "px";
+    topNamespace.parentNode.removeChild(temp);
+}
+
 function orderData (data) {
     var sortable = [],
         sorted = {};

source/client/scss/basic.scss

@@ -45,17 +45,15 @@ html, body {
             font-weight: bold;
             vertical-align: middle;
 
-            #topNamespace {
+            .topNamespace {
 
                 background: none;
                 border: none;
                 font: inherit;
-                outline: none;
+                outline: 0;
                 -webkit-appearance: none;
                 -moz-appearance: none;
                 appearance: none;
-                text-indent: 1px;
-                text-overflow: '';
                 cursor: pointer;
                 @include transition($defaultTransition);