diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index f4ea8d895461ee11d8020814e4fb2316fe25c70c..acf96d805fc430ffcf5cb223437786f10de236b3 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -53,12 +53,13 @@ export class Renderer implements IPagedRenderer { const element = append(root, $('.extension')); const icon = append(element, $('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')); diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css index 42d4966c98d6dd9a16bd7e7dabdac57602c03747..d4be63f4d364b043174725a8e91de6e5b5c5e0ae 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/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;