Fix microsoft#141331

Author: sandy081

src/vs/workbench/contrib/extensions/browser/extensionEditor.ts

@@ -66,7 +66,7 @@ import { Delegate } from 'vs/workbench/contrib/extensions/browser/extensionsList
 import { renderMarkdown } from 'vs/base/browser/markdownRenderer';
 import { attachKeybindingLabelStyler } from 'vs/platform/theme/common/styler';
 import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
-import { errorIcon, infoIcon, starEmptyIcon, verifiedPublisherIcon as verifiedPublisherThemeIcon, warningIcon } from 'vs/workbench/contrib/extensions/browser/extensionsIcons';
+import { errorIcon, infoIcon, preReleaseIcon, starEmptyIcon, verifiedPublisherIcon as verifiedPublisherThemeIcon, warningIcon } from 'vs/workbench/contrib/extensions/browser/extensionsIcons';
 import { MarkdownString } from 'vs/base/common/htmlContent';
 import { IPaneCompositePartService } from 'vs/workbench/services/panecomposite/browser/panecomposite';
 import { ViewContainerLocation } from 'vs/workbench/common/views';
@@ -195,7 +195,9 @@ class PreReleaseTextWidget extends ExtensionWithDifferentGalleryVersionWidget {
 	constructor(container: HTMLElement) {
 		super();
 		this.element = append(container, $('span.pre-release'));
-		this.element.textContent = localize('preRelease', "Pre-Release");
+		append(this.element, $('span' + ThemeIcon.asCSSSelector(preReleaseIcon)));
+		const textElement = append(this.element, $('span.pre-release-text'));
+		textElement.textContent = localize('preRelease', "Pre-Release");
 		this.render();
 	}
 	render(): void {
@@ -286,10 +288,11 @@ export class ExtensionEditor extends EditorPane {
 		const name = append(title, $('span.name.clickable', { title: localize('name', "Extension name"), role: 'heading', tabIndex: 0 }));
 		const versionWidget = new VersionWidget(title);
 
+		const preReleaseWidget = new PreReleaseTextWidget(title);
+
 		const preview = append(title, $('span.preview', { title: localize('preview', "Preview") }));
 		preview.textContent = localize('preview', "Preview");
 
-		const preReleaseWidget = new PreReleaseTextWidget(title);
 		const builtin = append(title, $('span.builtin'));
 		builtin.textContent = localize('builtin', "Built-in");
 

src/vs/workbench/contrib/extensions/browser/extensionsWidgets.ts

@@ -486,10 +486,10 @@ export class ExtensionHoverWidget extends ExtensionWidget {
 		}
 		const markdown = new MarkdownString('', { isTrusted: true, supportThemeIcons: true });
 
-		markdown.appendMarkdown(`**${this.extension.displayName}** _v${this.extension.version}_`);
+		markdown.appendMarkdown(`**${this.extension.displayName}**&nbsp;<span style="background-color:#8080802B;">**&nbsp;_v${this.extension.version}_**&nbsp;</span>`);
 		if (this.extension.local?.isPreReleaseVersion || this.extension.gallery?.properties.isPreReleaseVersion) {
 			const extensionPreReleaseIcon = this.themeService.getColorTheme().getColor(extensionPreReleaseIconColor);
-			markdown.appendMarkdown(`&nbsp;<span style="color:#ffffff;background-color:${extensionPreReleaseIcon ? Color.Format.CSS.formatHex(extensionPreReleaseIcon) : '#ffffff'};">&nbsp;${localize('pre-release-label', "Pre-Release")}&nbsp;</span>`);
+			markdown.appendMarkdown(`**&nbsp;**&nbsp;<span style="background-color:${extensionPreReleaseIcon ? Color.Format.CSS.formatHex(extensionPreReleaseIcon) : '#ffffff'};">&nbsp;$(${preReleaseIcon.id})&nbsp;${localize('pre-release-label', "Pre-Release")}&nbsp;</span>`);
 		}
 		markdown.appendText(`\n`);
 

src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css

@@ -89,15 +89,23 @@
 }
 
 .extension-editor > .header > .details > .title > .pre-release {
-	font-size: 10px;
 	margin-left: 10px;
 	padding: 0px 4px;
 	border-radius: 4px;
-	user-select: none;
-	-webkit-user-select: none;
 	background-color: var(--vscode-extensionIcon-preReleaseForeground);
 	color: #ffffff;
-	white-space: nowrap;
+	display: flex;
+	align-items: center;
+}
+
+.extension-editor > .header > .details > .title > .pre-release > .codicon.codicon-extensions-pre-release {
+	color: #ffffff;
+	font-size: 14px;
+}
+
+.extension-editor > .header > .details > .title > .pre-release > .pre-release-text {
+	font-size: 10px;
+	padding-left: 3px;
 }
 
 .monaco-workbench.vs .extension-editor > .header > .details > .title > .preview {