tweak css for icon label overflow

src/vs/base/browser/ui/iconLabel/iconLabel.ts

@@ -93,13 +93,15 @@ export class IconLabel {
 	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
 		this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label')));
 
+		const labelDescriptionContainer = new FastLabelNode(dom.append(this.domNode.element, dom.$('.monaco-icon-label-description-container')));
+
 		if (options && options.supportHighlights) {
-			this.labelNode = new HighlightedLabel(dom.append(this.domNode.element, dom.$('a.label-name')));
+			this.labelNode = new HighlightedLabel(dom.append(labelDescriptionContainer.element, dom.$('a.label-name')));
 		} else {
-			this.labelNode = new FastLabelNode(dom.append(this.domNode.element, dom.$('a.label-name')));
+			this.labelNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('a.label-name')));
 		}
 
-		this.descriptionNode = new FastLabelNode(dom.append(this.domNode.element, dom.$('span.label-description')));
+		this.descriptionNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('span.label-description')));
 	}
 
 	public get element(): HTMLElement {

src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -25,25 +25,29 @@
 	/* fonts icons */
 	-webkit-font-smoothing: antialiased;
 	vertical-align: top;
+
+	flex-shrink: 0; /* fix for https://github.com/Microsoft/vscode/issues/13787 */
+}
+
+.monaco-icon-label > .monaco-icon-label-description-container {
+	overflow: hidden; /* this causes the label/description to shrink first if decorations are enabled */
+	text-overflow: ellipsis;
 }
 
-.monaco-icon-label > .label-name {
+.monaco-icon-label > .monaco-icon-label-description-container > .label-name {
 	color: inherit;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
 
-.monaco-icon-label > .label-description {
+.monaco-icon-label > .monaco-icon-label-description-container > .label-description {
 	opacity: 0.7;
 	margin-left: 0.5em;
 	font-size: 0.9em;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
-	overflow: hidden;
-	text-overflow: ellipsis;
-	flex-shrink: 100;
 }
 
-.monaco-icon-label.italic > .label-name,
-.monaco-icon-label.italic > .label-description {
+.monaco-icon-label.italic > .monaco-icon-label-description-container > .label-name,
+.monaco-icon-label.italic > .monaco-icon-label-description-container > .label-description {
 	font-style: italic;
 }
 

src/vs/workbench/parts/files/browser/media/explorerviewlet.css

@@ -37,10 +37,6 @@
 	flex: 1;
 }
 
-.explorer-viewlet .explorer-item::before {
-	flex-shrink: 0; /* fix for https://github.com/Microsoft/vscode/issues/13787 */
-}
-
 .explorer-viewlet .explorer-item.explorer-item-edited .label-name {
 	flex: 0; /* do not steal space when label is hidden because we are in edit mode */
 }

src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css

@@ -84,12 +84,7 @@
 	overflow: hidden;
 }
 
-.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label > a.label-name {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.scm-viewlet .monaco-list-row > .resource > .name.strike-through > .monaco-icon-label > .label-name {
+.scm-viewlet .monaco-list-row > .resource > .name.strike-through > .monaco-icon-label > .monaco-icon-label-description-container > .label-name {
 	text-decoration: line-through;
 }