Using file nesting causes bad alignment in explorer panel

[andrewburgess]

The icon alignment in the Explorer panel doesn't look right when using the explorer.fileNesting feature

With Monokai Icons:

With VSCode Icons

With Material Icon Theme:

Reproduce

Add something like

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
    "*.ts": "${capture}.ts, ${capture}.test.ts",
    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
    "*.jsx": "${capture}.js",
    "*.tsx": "${capture}.ts, ${capture}.test.tsx",
    "tsconfig.json": "tsconfig.*.json",
    "package.json": "package-lock.json, yarn.lock"
},

to VS Code settings.json, which will tell it to nest certain similar files together other a parent file (easiest is to use the package.json and package-lock.json files

[gdube-nrc]

Ah, it's actually kind of a vscode issue:

• hidesExplorerArrows for search tree should keep arrows for files microsoft/vscode#169685
• [Feature Request] Better alignment for file nesting microsoft/vscode#148974

Monokai uses hidesExplorerArrows: false, and when this is enabled, the arrow (expand/collapse) icon gets removed from all nodes in the DOM tree UNLESS it's a file node with nested files under it. Which sucks.

The only way for Monokai to fix this would be to remove hidesExplorerArrows: false and instead provide a product icon theme (contributes: productIconThemes) and replace the chevron-right & chevron-down icons.

As a personal work around, I use another file icon theme that doesn't use hidesExplorerArrows: false, for eg. "Studio Icons".