fix #13758

src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts

@@ -53,12 +53,13 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const element = append(root, $('.extension'));
 		const icon = append(element, $<HTMLImageElement>('img.icon'));
 		const details = append(element, $('.details'));
-		const header = append(details, $('.header'));
+		const headerContainer = append(details, $('.header-container'));
+		const header = append(headerContainer, $('.header'));
 		const name = append(header, $('span.name'));
 		const version = append(header, $('span.version'));
 		const installCount = append(header, $('span.install-count'));
 		const ratings = append(header, $('span.ratings'));
-		const status = append(header, $(''));
+		const status = append(headerContainer, $('span.status'));
 		const description = append(details, $('.description.ellipsis'));
 		const footer = append(details, $('.footer'));
 		const author = append(footer, $('.author.ellipsis'));

src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css

@@ -63,20 +63,26 @@
 	overflow: hidden;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header {
+.extensions-viewlet > .extensions .extension > .details > .header-container {
+	height: 19px;
+	display: flex;
+	overflow: hidden;
+}
+
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header {
 	display: flex;
 	align-items: baseline;
 	flex-wrap: wrap;
-	height: 19px;
 	overflow: hidden;
+	flex: 1;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header > .name {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .name {
 	font-weight: bold;
 	min-width: fit-content;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header > .version {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .version {
 	opacity: 0.6;
 	font-size: 80%;
 	padding-left: 6px;
@@ -84,26 +90,26 @@
 	min-width: fit-content;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header > .install-count:not(:empty) {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) {
 	font-size: 80%;
 	margin: 0 6px;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header > .install-count > .octicon {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count > .octicon {
 	font-size: 100%;
 	margin-right: 2px;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header > .ratings {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .ratings {
 	text-align: right;
 }
 
-.extensions-viewlet.narrow > .extensions .extension > .details > .header > .ratings,
-.extensions-viewlet.narrow > .extensions .extension > .details > .header > .install-count {
+.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .ratings,
+.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .install-count {
 	display: none;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header .extension-status {
+.extensions-viewlet > .extensions .extension > .details > .header-container .extension-status {
 	width: 7px;
 	height: 7px;
 	margin-left: 5px;