Change:
While helping Marketplace improve extension search I noticed that for most queries there are no more than 5 good results. And we currently show an infinite list which depending on Monitor size would show 10 - 20 extensions. Also we sometimes struggle with the small size of extension items in the list - not enough space for all the decorations we would like to render. Based on the two above, I suggest we explore with increasing the vertical size of the extension items in the list. Ideally this would allow to present the information in a cleaner way when users search for extensions. I am not sure how this would effect the list of installed and recommended extensions. Ideally we would also increase the size of those to be consistent, but for those cases I am not convinced if it would be a win. what do you think? for ux thoughts Example from my screen !
From a visual standpoint it makes sense to explore giving these some breathing room. As far as solving for quality results, I don't know if making them bigger will necessarily solve that problem alone. It could be that we have a sort of "Top Results" section up top with the remaining results in another section. Just one idea off the top of my head.
I agree its worth exploring it give more space for an extension in the viewlet. But this might impact if the size of the screen is smaller.
We closed this issue because we in the foreseeable future. If you disagree and feel that this issue is crucial: we are happy to listen and to reconsider. If you wonder what we are up to, please see our and . Thanks for your understanding, and happy coding!
I see this is merged and should be latest VS Code Insiders but I do not see any changes in my VS Code Insiders. am I missing something here?
I'm seeing the latest after updating: <img width="320" alt="CleanShot 2023-01-03 at 08 48 48 src="https://user-"<img width="328" alt="CleanShot 2023-01-03 at 08 49 32 src="https://user-"
I just got the update. Looks ok to me - I will need some time to adjust. Let's see what insiders users and the rest of the team says :)

Discussion:
import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget'; import { verifiedPublisherIcon as verifiedPublisherThemeIcon } from 'vs/workbench/contrib/extensions/browser/extensionsIcons'; <del> export const EXTENSION_LIST_ELEMENT_HEIGHT = 62; </del> <ins> export const EXTENSION_LIST_ELEMENT_HEIGHT = 72; </ins> export interface IExtensionsViewState { onFocus: Event<IExtension>;

.extension-list-item > .icon-container { position: relative; <ins> display: flex; align-items: center; </ins> } .extension-list-item > .icon-container > .icon { width: 42px; height: 42px; <del> padding: 10px 14px 10px 0; </del> <ins> padding-right: 14px; </ins> flex-shrink: 0; object-fit: contain; }

.extension-list-item > .details { flex: 1; <del> padding: 4px 0; </del> <ins> display: flex; </ins> overflow: hidden; <ins> flex-direction: column; justify-content: center; </ins> } .extension-list-item > .details > .header-container {

.extension-list-item > .details > .description { padding-right: 11px; <ins> line-height: normal; </ins> color: var(--vscode-descriptionForeground); }

.extension-list-item > .details > .footer > .author > .publisher-name { font-size: 90%; <ins> color: var(--vscode-descriptionForeground); </ins> font-weight: 600; } <ins> .monaco-list-row.disabled .extension-list-item > .details > .footer > .author > .publisher-name{ color: var(--vscode-disabledForeground); } .monaco-list-row.disabled.selected .extension-list-item > .details > .footer > .author > .publisher-name{ color: unset; } .monaco-list-row.selected .extension-list-item > .details > .footer > .author > .publisher-name{ color: unset; } </ins> .extension-list-item > .details > .footer > .author > .publisher-name:not(:first-child) { padding-left: 1px; }

.extensions-viewlet > .extensions .extension-list-item.loading > .icon-container { display: none; } <ins> .extensions-viewlet.narrow > .extensions .extension-list-item > .icon-container { display: flex; align-items: flex-start; padding-top: 10px; } </ins> .extensions-viewlet.narrow > .extensions .extension-list-item > .icon-container > .icon { width: 24px; height: 24px; <del> padding-top: 8px; padding-right: 6px; </del> <ins> padding-right: 8px; </ins> } .extensions-viewlet:not(.narrow) > .extensions .extension-list-item > .details > .header-container > .header > .extension-remote-badge-container,