From 09782b2ed85c298de8c05754c8cdb96f5ffeaf77 Mon Sep 17 00:00:00 2001
From: Muhammad Anas Shahid <muhammad.shahid@ericsson.com>
Date: Wed, 22 Jan 2020 10:21:23 -0500
Subject: [PATCH] Title: Display Ellipses when content not fully displayed

Fixes: #6711.
When the width of the navigator is reduced and the content cannot be displayed completely, then the file name should show ellipses, which currently is not displayed. Fixing one of the css property, fixed the issue.

Signed-off-by: Muhammad Anas Shahid <muhammad.shahid@ericsson.com>
---
 packages/plugin-ext/src/main/browser/style/tree.css            | 3 +--
 packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-ext/src/main/browser/style/tree.css b/packages/plugin-ext/src/main/browser/style/tree.css
index 8811d44f58807..7bd3d3d8843d0 100644
--- a/packages/plugin-ext/src/main/browser/style/tree.css
+++ b/packages/plugin-ext/src/main/browser/style/tree.css
@@ -30,7 +30,7 @@
     margin-left: var(--theia-ui-padding);
 }
 
-.theia-TreeNodeSegment {
+.theia-tree-view.theia-TreeNodeSegment {
     display: flex;
 }
 
@@ -38,4 +38,3 @@
     align-items: center;
     height: 100%;
 }
-
diff --git a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
index 79dec87100ef8..449acb73db348 100644
--- a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
+++ b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
@@ -281,7 +281,8 @@ export class TreeViewWidget extends TreeWidget {
             });
         }
 
-        nodes.push(<div>{work}</div>);
+        const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_SEGMENT_GROW_CLASS].join(' ');
+        nodes.push(<div className={className}>{work}</div >);
         if (description) {
             nodes.push(<div className='theia-tree-view-description'>
                 {description}