Terminal dock tab improvements (#294)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/dock/dock-tab.scss

@@ -14,7 +14,7 @@
 
   .label {
     .title {
-      max-width: 150px;
+      max-width: 250px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
@@ -31,4 +31,4 @@
   &:last-child {
     padding-right: $padding;
   }
-}
+}

dashboard/client/components/dock/terminal-tab.tsx

@@ -7,12 +7,20 @@ import { autobind, cssNames } from "../../utils";
 import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
+import { dockStore } from "./dock.store";
+import { reaction } from "mobx";
 
 interface Props extends DockTabProps {
 }
 
 @observer
 export class TerminalTab extends React.Component<Props> {
+  componentDidMount() {
+    reaction(() => this.isDisconnected, () => {
+      dockStore.closeTab(this.tabId)
+    })
+  }
+
   get tabId() {
     return this.props.value.id;
   }
@@ -31,6 +39,7 @@ export class TerminalTab extends React.Component<Props> {
     const className = cssNames("TerminalTab", this.props.className, {
       disconnected: this.isDisconnected,
     });
+
     return (
       <DockTab
         {...this.props}
@@ -48,4 +57,4 @@ export class TerminalTab extends React.Component<Props> {
       />
     )
   }
-}
+}