Merge pull request #411 from tyeth/css-header-overflow

fix(header): css for overflowing truncated title needs nowrap + title(tooltip) js sync

Author: makermelissa

js/workflows/workflow.js

@@ -183,6 +183,7 @@ class Workflow {
         }
 
         this.terminalTitle.textContent = title;
+        this.terminalTitle.title = title;
     }
 
     async showConnect(documentState) {

sass/layout/_header.scss

@@ -138,6 +138,9 @@
     flex: auto;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
+    max-width: fit-content;
 }
 
 @media (max-width: $screen-xs-max) {

sass/layout/_layout.scss

@@ -60,13 +60,16 @@
 
 #editor-bar, #serial-bar {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     padding: 0 10px;
     min-height: 60px;
     height: 4em;
 }
 
+#editor-bar {
+    flex-wrap: wrap;
+}
+
 #editor-page {
     #editor {
         flex: 1 1 0%;