diff --git a/CHANGELOG.md b/CHANGELOG.md
index 832ad678..cb8fabc6 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}
>
- {team.name}
+ {team.name}
{ ' ' }
{ 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;
}