From 8c431ff06170488c7ae5ad115f50415725e39b09 Mon Sep 17 00:00:00 2001
From: Eric Newport <kethinov@gmail.com>
Date: Fri, 13 Apr 2018 11:36:41 -0400
Subject: [PATCH] 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                          |  2 ++
 src/browser/components/TabBar.jsx     |  2 +-
 src/browser/css/components/TabBar.css | 10 +++++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24049ed1..0c1fb4df 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/src/browser/components/TabBar.jsx b/src/browser/components/TabBar.jsx
index 58a88449..bb77d3c3 100644
--- a/src/browser/components/TabBar.jsx
+++ b/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}
diff --git a/src/browser/css/components/TabBar.css b/src/browser/css/components/TabBar.css
index a7fdf8b1..a4caa4d3 100644
--- a/src/browser/css/components/TabBar.css
+++ b/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;
 }