Fix setting deprecation message overflowing other rows

Fix microsoft#84007

Author: roblourens

src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css

@@ -346,6 +346,11 @@
 	margin-top: 3px;
 	user-select: text;
 	-webkit-user-select: text;
+	display: none;
+}
+
+.settings-editor > .settings-body > .settings-tree-container .setting-item-contents.is-deprecated .setting-item-deprecation-message {
+	display: block;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description {
@@ -354,10 +359,6 @@
 	-webkit-user-select: text;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-deprecation-message {
-	position: absolute;
-}
-
 .settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-validation-message {
 	display: none;
 }

src/vs/workbench/contrib/preferences/browser/settingsTree.ts

@@ -467,7 +467,10 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		}
 
 		const onChange = (value: any) => this._onDidChangeSetting.fire({ key: element.setting.key, value, type: template.context!.valueType });
-		template.deprecationWarningElement.innerText = element.setting.deprecationMessage || '';
+		const deprecationText = element.setting.deprecationMessage || '';
+		template.deprecationWarningElement.innerText = deprecationText;
+		DOM.toggleClass(template.containerElement, 'is-deprecated', !!deprecationText);
+
 		this.renderValue(element, <ISettingItemTemplate>template, onChange);
 
 	}