diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index f4ea8d89546..acf96d805fc 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 42d4966c98d..d4be63f4d36 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 { - display: flex; - align-items: baseline; - flex-wrap: wrap; +.extensions-viewlet > .extensions .extension > .details > .header-container { height: 19px; + display: flex; overflow: hidden; } -.extensions-viewlet > .extensions .extension > .details > .header > .name { +.extensions-viewlet > .extensions .extension > .details > .header-container > .header { + display: flex; + align-items: baseline; + flex-wrap: wrap; + overflow: hidden; + flex: 1; +} + +.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;