fix text ellipsis on sidebar-item (#10430)

[FIX] Room's name was cutting instead of having ellipses on sidebar
RocketChat · Apr 16, 2018 · fa91f8d · fa91f8d
1 parent bdd28e9
commit fa91f8d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -141,7 +141,7 @@
 
 	&__user-status {
 		flex: 0 0 auto;
-		
+
 		width: var(--sidebar-item-user-status-size);
 		height: var(--sidebar-item-user-status-size);
 
@@ -201,6 +201,15 @@
 		justify-content: space-between;
 	}
 
+	&__ellipsis {
+		overflow: hidden;
+
+		flex: 1;
+
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
 	&__name {
 		display: flex;
 

diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.html b/packages/rocketchat-ui-sidenav/client/sidebarItem.html
@@ -30,10 +30,12 @@
 									</div>
 								{{/if}}
 							{{/unless}}
-							{{name}}
-							{{#if mySelf}}
-								<span class="sidebar-item__me">({{_ "You"}})</span>
-							{{/if}}
+							<div class="sidebar-item__ellipsis">
+								{{name}}
+								{{#if mySelf}}
+									<span class="sidebar-item__me">({{_ "You"}})</span>
+								{{/if}}
+							</div>
 						</div>
 						{{#if isExtendedViewMode}}
 							{{#if lastMessageTs}}