Truncate long server names in server tabs

- Should resolve https://github.com/mattermost/desktop/issues/518
- Shows server name in a `title` attribute so that you can still see the full name on hover.
- Rename teamTabItem-label to teamTabItem-unread.

CHANGELOG.md

@@ -22,6 +22,8 @@ Release date: TBD
 [#746](https://github.com/mattermost/desktop/pull/746)
 - Hide hovering URL bar for internal links.
 [#745](https://github.com/mattermost/desktop/pull/745)
+- Truncate long server names in server tabs.
+[#518](https://github.com/mattermost/desktop/issues/518)
 
 #### Windows
 - [Windows 7/8] Desktop notifications now respect the duration setting of Control Panel.

src/browser/components/TabBar.jsx

@@ -61,7 +61,7 @@ export default class TabBar extends React.Component { // need "this"
           ref={id}
           draggable={false}
         >
-          <span className={unreadCount === 0 ? '' : 'teamTabItem-label'}>{team.name}</span>
+          <span title={team.name} className={unreadCount === 0 ? '' : 'teamTabItem-unread'}>{team.name}</span>
           { ' ' }
           { badgeDiv }
           {permissionOverlay}

src/browser/css/components/TabBar.css

@@ -1,3 +1,11 @@
+.TabBar .teamTabItem span {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 170px;
+}
+
 .TabBar>li>a {
   background: rgba(0, 0, 0, 0.05);
   border-radius: 2px 2px 0 0;
@@ -38,6 +46,6 @@
   border-radius: 50%;
 }
 
-.TabBar .teamTabItem-label {
+.TabBar .teamTabItem-unread {
   font-weight: bold;
 }