Tab header layout breaks when the editor group width is small

[tusharsnx]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.94.2 (user setup
• OS Version: Windows 11 24H2

Steps to Reproduce:

1. Have two editor groups split horizontally.
2. Reduce the width of the right editor group until the tab header layout breaks.

https://github.com/user-attachments/assets/e05ed19b-961a-479b-8918-c4a5ec22c09e

[bpasero]

Curious what are your settings?

[benibenj]

We had this bug 1 month ago, but fixed it. I'm not able to reproduce this anymore.

[tusharsnx]

settings.json

```json { "editor.suggestSelection": "first", "workbench.editorAssociations": { "*.ipynb": "jupyter-notebook" }, "explorer.confirmDelete": false, "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "icon": "terminal-cmd" }, "bash": { "path": "C:\\Program Files\\Git\\bin\\bash.exe", "args": [ "-i", "-l" ], "icon": "terminal-bash" } }, "terminal.integrated.defaultProfile.linux": "zsh", "terminal.integrated.profiles.linux": { "bash": { "path": "bash", "icon": "terminal-bash", "args": [ "--login" ] }, "zsh": { "path": "zsh", "args": [ "--login" ] }, "fish": { "path": "fish" }, "tmux": { "path": "tmux", "icon": "terminal-tmux" }, "pwsh": { "path": "pwsh", "icon": "terminal-powershell" } }, "diffEditor.codeLens": true, // "editor.fontFamily": "MonoLisa Nerd Font", "editor.fontFamily": "JetBrainsMono Nerd Font", "editor.fontLigatures": true, "workbench.startupEditor": "none", "editor.occurrencesHighlight": "off", "workbench.colorCustomizations": { "[Default Dark+]": { "editorGroup.dropBackground": "#00000000", // "diffEditor.removedLineBackground": "#301a1f", // "menu.selectionBackground": "#323232", // "menu.selectionBackground": "#3483f5", // "menu.selectionForeground": "#c2c2c2", // "marks": "#ff0000", "foreground": "#bfbfbf", // Scrollbar "scrollbarSlider.background": "#ffffff0f", // Indent Guide "editorIndentGuide.background1": "#2c2c2c", "editorIndentGuide.activeBackground1": "#2c2c2c", "icon.foreground": "#bfbfbf", "button.foreground": "#e5e5e5", "diffEditor.removedLineBackground": "#B8294A27", // "diffEditor.removedTextBackground": "#803030", "diffEditor.removedTextBackground": "#F53B3B5c", // "diffEditor.insertedLineBackground": "#12261e", "diffEditor.insertedLineBackground": "#00935819", // "diffEditor.insertedTextBackground": "#1d572d", "diffEditor.insertedTextBackground": "#00CA4540", "commandCenter.background": "#101010", // "commandCenter.border": "#222222", // "activityBar.background": "#181818", "activityBar.background": "#141414", // "activityBar.border": "#000000", "activityBar.activeBorder": "#348ef5", "activityBar.foreground": "#a0a0a0", // "editor.background": "#181818", "editor.background": "#141414", // "editor.selectionBackground": "#0b2c4f", "editor.selectionBackground": "#10253f", "editor.inactiveSelectionBackground": "#10253f", // "sideBar.background": "#181818", "sideBar.background": "#141414", // "sideBar.border": "#000000", "sideBarSectionHeader.border": "#000000", "editorLineNumber.foreground": "#ffffff2a", // "statusBar.background": "#181818", "statusBar.background": "#141414", // "statusBar.foreground": "#606060", "statusBar.foreground": "#6e6e6e", // "statusBar.border": "#000000", "editorStickyScroll.border": "#000000", "statusBar.debuggingForeground": "#ffffff", "statusBar.noFolderForeground": "#ffffffc0", "statusBar.noFolderBackground": "#005f5f", "statusBar.debuggingBackground": "#005f5f", "statusBarItem.remoteForeground": "#606060", "statusBarItem.remoteBackground": "#141414", // "editorGroupHeader.tabsBackground": "#181818", "editorGroupHeader.tabsBackground": "#141414", // "editorGroupHeader.border": "#222222", // "tab.border": "#181818", // "tab.border": "#000000", // "titleBar.border": "#000000", "editorGroupHeader.tabsBorder": "#ff0000", "editorGroup.border": "#000000", // "editorGroupHeader.border": "#000000", "tab.activeBorderTop": "#348ef5", // "tab.activeBackground": "#181818", "tab.activeForeground": "#d0d0d0", // "tab.inactiveBackground": "#181818", "tab.inactiveBackground": "#141414", "titleBar.activeForeground": "#8b8b8b", // "titleBar.activeBackground": "#141414", // "titleBar.activeBackground": "#1c1c1c", // "titleBar.activeBackground": "#181818", "titleBar.activeBackground": "#141414", // "titleBar.border": "#222222", "editorWidget.background": "#1f1f1f", "panel.border": "#00000000", "panelTitle.activeBorder": "#348ef5", "editorBracketHighlight.foreground1": "#b4a13e", "editorBracketHighlight.foreground2": "#c079bd", "editorBracketHighlight.foreground3": "#438dd2", "editorInlayHint.foreground": "#606060", // "editorInlayHint.background": "#181818", "editorInlayHint.background": "#ffffff00", "editor.foreground": "#d0d0d0", // "scrollbarSlider.background": "#ffffff13", "editor.lineHighlightBorder": "#222222", "editorRuler.foreground": "#000000", // "editorInlayHint.typeForeground": "#606060", // "editorInlayHint.typeBackground": "#181818" //*** terminal colors *** // "terminalCursor.background": "#A89984", // "terminalCursor.foreground": "#A89984", // "terminal.ansiBlack": "#1D2021", // "terminal.ansiBlue": "#0D6678", // "terminal.ansiBrightBlack": "#665C54", // // "terminal.ansiBrightBlue": "#0D6678", // "terminal.ansiBrightCyan": "#8BA59B", "terminal.ansiBrightGreen": "#21c684", // "terminal.ansiBrightMagenta": "#8F4673", // "terminal.ansiBrightRed": "#FB543F", // "terminal.ansiBrightWhite": "#FDF4C1", "terminal.ansiBrightYellow": "#cdcd36", // "terminal.ansiCyan": "#8BA59B", // "terminal.ansiGreen": "#1ebe7d", // "terminal.ansiMagenta": "#8F4673", // "terminal.ansiRed": "#FB543F", "terminal.ansiWhite": "#CCCCCC" // "terminal.ansiYellow": "#d3d339", } }, "editor.semanticTokenColorCustomizations": { "[Default Dark+]": { "rules": {} } }, "editor.tokenColorCustomizations": { "[Default Dark+]": { // "comments": "#454545", "comments": "#707070", "functions": "#bcbc92", "variables": "#88bfdd", "textMateRules": [ // { // "scope": "variable.other.local", // "settings": { // "foreground": "#88bfdd" // } // }, { "scope": "punctuation.semi", "settings": { "foreground": "#606060" } }, // { // "scope": "variable.parameter", // "settings": { // "foreground": "#88bfdd" // } // }, { "scope": "variable.other.property", "settings": { "foreground": "#88bfdd" } }, { "scope": "support.type.property-name", "settings": { "foreground": "#88bfdd" } }, { "scope": "variable.scss", "settings": { "foreground": "#88bfdd" } }, // { // "scope": "support.class", // "settings": { // "foreground": "#44baa1" // } // }, // { // "scope": "support.type", // "settings": { // "foreground": "#45baa1" // } // }, // { // "scope": "entity.name.type", // "settings": { // "foreground": "#45baa1" // } // }, // { // "scope": "entity.name.type", // "settings": { // "foreground": "#45baa1" // } // }, { "scope": "keyword.other.suffix.literal.reserved.string.cpp", "settings": { "foreground": "#123b51" } }, { "scope": "string.quoted", "settings": { "foreground": "#c18770" } }, { "scope": "support.constant.font-name", "settings": { "foreground": "#c18770" } }, { "scope": "support.constant.property-value", "settings": { "foreground": "#c18770" } }, { "scope": "entity.name.tag.css", "settings": { "foreground": "#cfb378" } }, { "scope": "entity.other.attribute-name.pseudo-class.css", "settings": { "foreground": "#cfb378" } }, { "scope": "entity.other.attribute-name.pseudo-element.css", "settings": { "foreground": "#cfb378" } }, { "scope": "keyword.control", "settings": { "foreground": "#b380b8" } }, ] } }, "jupyter.askForKernelRestart": false, "jupyter.jupyterServerType": "local", "notebook.cellToolbarLocation": { "default": "right", "jupyter-notebook": "left" }, "git.autofetch": true, "notebook.cellFocusIndicator": "border", "notebook.consolidatedRunButton": true, "output.smartScroll.enabled": false, "emmet.includeLanguages": { "javascript": "javascriptreact" }, "javascript.updateImportsOnFileMove.enabled": "always", "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, "prettier.printWidth": 100, "terminal.integrated.mouseWheelScrollSensitivity": 0.3, "redhat.telemetry.enabled": false, "json.schemas": [], "aws.telemetry": false, "aws.profile": "profile:tushar", "aws.onDefaultRegionMissing": "ignore", "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[javascriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[scss]": { "editor.defaultFormatter": "vscode.css-language-features" }, "[markdown]": { "editor.formatOnSave": false, "editor.wordWrap": "off" }, "python.analysis.typeCheckingMode": "basic", "python.formatting.provider": "black", "typescript.updateImportsOnFileMove.enabled": "always", "terminal.integrated.inheritEnv": false, "files.exclude": { "**/__pycache__": true, "**/.mypy_cache": true }, "python.terminal.activateEnvironment": false, "aws.sam.enableCodeLenses": false, // vim configs "vim.useSystemClipboard": false, "vim.insertModeKeyBindingsNonRecursive": [ { "before": [ "j", "k" ], "after": [ "" ] }, { // "before": [ // "" // ], // "after": [ // "" // ] } ], "vim.normalModeKeyBindingsNonRecursive": [ { "before": [ "", "p" ], "after": [ "\"", "*", "p" ] }, { "before": [ "", "P" ], "after": [ "\"", "*", "P" ] }, { "before": [ "q" ], "after": [ "" ] }, { "before": [ "x" ], "after": [ "\"", "_", "x" ] }, { "before": [ "" ], "after": [ "\"", "_", "" ] }, { "before": [ "" ], "after": [ "", "z", "z" ] }, { "before": [ "" ], "after": [ "", "z", "z" ] }, { "before": [ "N" ], "after": [ "N", "z", "z" ] }, { "before": [ "n" ], "after": [ "n", "z", "z" ] }, { "before": [ "g", "d" ], "commands": [ "editor.action.revealDefinition" ] } ], "vim.visualModeKeyBindingsNonRecursive": [ { "before": [ "", "p" ], "after": [ "\"", "*", "p" ] }, { "before": [ "", "P" ], "after": [ "\"", "*", "P" ] }, { "before": [ "", "y" ], "after": [ "\"", "*", "y" ] }, { "before": [ "", "Y" ], "after": [ "\"", "*", "Y" ] }, { "before": [ "" ], "commands": [ "editor.action.addSelectionToNextFindMatch" ] }, { "before": [ "" ], "commands": [ "cursorUndo" ] }, { "before": [ "p" ], "after": [ "\"", "_", "d", "P" ] }, { "before": [ "" ], "commands": [ "editor.action.moveLinesDownAction" ] }, { "before": [ "" ], "commands": [ "editor.action.moveLinesUpAction" ] } ], // "vim.smartRelativeLine": true, "vim.timeout": 300, "vim.leader": "space", "vim.handleKeys": { "": false, "": false, "": false, // "": false, // "": false, "": false, "": false, "": false, "": false, "": false, "": false }, "git.enableCommitSigning": true, "editor.linkedEditing": true, "terminal.integrated.enablePersistentSessions": false, "scm.diffDecorationsGutterPattern": { // "added": true, // "modified": true }, "yaml.customTags": [ "!And", "!And sequence", "!If", "!If sequence", "!Not", "!Not sequence", "!Equals", "!Equals sequence", "!Or", "!Or sequence", "!FindInMap", "!FindInMap sequence", "!Base64", "!Join", "!Join sequence", "!Cidr", "!Ref", "!Sub", "!Sub sequence", "!GetAtt", "!GetAZs", "!ImportValue", "!ImportValue sequence", "!Select", "!Select sequence", "!Split", "!Split sequence" ], "markdown.preview.scrollPreviewWithEditor": false, "markdown.preview.scrollEditorWithPreview": false, "prettier.tabWidth": 4, "git.enableStatusBarSync": false, "workbench.layoutControl.type": "menu", "editor.inlineSuggest.enabled": true, "github.copilot.enable": { "*": true // "yaml": false, // "plaintext": false, // "markdown": true, // "scss": false, // "typescriptreact": false, // "python": true, // "jsonc": true, }, "terminal.integrated.persistentSessionReviveProcess": "never", "terminal.integrated.fontSize": 16, "git.showCommitInput": false, "vim.showmodename": false, "macros": { "showFileAndFocus": [ "workbench.files.action.showActiveFileInExplorer", "workbench.files.action.focusFilesExplorer" ], "openFileAndCollapseSideBar": [ "list.select", "workbench.action.closeSidebar" ] }, "git.showActionButton": { "commit": false, "publish": false, "sync": false }, "debug.onTaskErrors": "showErrors", "workbench.enableExperiments": false, "editor.unicodeHighlight.invisibleCharacters": false, "[yaml]": { "editor.defaultFormatter": "redhat.vscode-yaml" }, "files.associations": { ".env": "dotenv" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "settingsSync.ignoredSettings": [ "-C_Cpp.default.includePath" ], "[c]": { "editor.defaultFormatter": "ms-vscode.cpptools" }, "telemetry.telemetryLevel": "off", "[css]": { "editor.defaultFormatter": "biomejs.biome" }, "[xml]": { "files.trimTrailingWhitespace": false }, "[cpp]": { "editor.suggest.insertMode": "insert", "editor.defaultFormatter": "ms-vscode.cpptools" }, "editor.inlayHints.enabled": "offUnlessPressed", "editor.inlayHints.padding": true, "javascript.inlayHints.functionLikeReturnTypes.enabled": true, "javascript.inlayHints.variableTypes.enabled": true, "workbench.list.smoothScrolling": true, "rust-analyzer.lens.enable": false, "editor.cursorBlinking": "solid", "editor.accessibilitySupport": "off", "rust-analyzer.typing.autoClosingAngleBrackets.enable": true, "rust-analyzer.files.watcher": "server", "rust-analyzer.restartServerOnConfigChange": true, "errorLens.enabledInMergeConflict": false, "errorLens.fontStyleItalic": true, "errorLens.enabledDiagnosticLevels": [ "error", "info" ], "errorLens.messageBackgroundMode": "message", "rust-analyzer.semanticHighlighting.doc.comment.inject.enable": false, "editor.minimap.renderCharacters": false, "editor.minimap.enabled": false, "editor.cursorSurroundingLines": 999, "terminal.integrated.commandsToSkipShell": [ "workbench.action.toggleSidebarVisibility" ], "editor.lineNumbers": "relative", "editor.rulers": [ 72 ], "explorer.autoReveal": false, "cmake.configureOnOpen": true, "bookmarks.sideBar.expanded": true, "bookmarks.useWorkaroundForFormatters": true, "outline.collapseItems": "alwaysCollapse", "git.openRepositoryInParentFolders": "never", "extensions.ignoreRecommendations": true, "vscode-neovim.useWSL": true, "vscode-neovim.neovimExecutablePaths.linux": "/home/linuxbrew/.linuxbrew/bin/nvim", "workbench.sideBar.location": "right", "remote.SSH.remotePlatform": { "localhost": "linux" }, "workbench.colorTheme": "Default Dark+", "diffEditor.experimental.useVersion2": true, "diffEditor.experimental.showMoves": true, "hexeditor.columnWidth": 16, "hexeditor.showDecodedText": true, "hexeditor.defaultEndianness": "little", "hexeditor.inspectorType": "aside", "gitlens.graph.minimap.enabled": false, "gitlens.graph.dimMergeCommits": true, "gitlens.views.branches.avatars": false, "editor.lineHeight": 1.7, "gitlens.currentLine.enabled": false, "gitlens.codeLens.enabled": false, "gitlens.telemetry.enabled": false, "gitlens.views.formats.commits.label": "${message}", "gitlens.views.commits.avatars": false, "gitlens.views.showRelativeDateMarkers": false, "gitlens.statusBar.tooltipFormat": " __${author}__, ${ago}${' via 'pullRequest}   _(${date})_ \n\n${message}${\n\n---\n\nfootnotes}\n\n${commands}", "gitlens.hovers.detailsMarkdownFormat": " __${author}__, ${ago}${' via 'pullRequest}   _(${date})_ \n\n${message}${\n\n---\n\nfootnotes}\n\n${commands}", "gitlens.hovers.avatars": false, "gitlens.views.lineHistory.avatars": false, "gitlens.views.fileHistory.avatars": false, "gitlens.views.remotes.avatars": false, "gitlens.views.tags.avatars": false, "gitlens.views.worktrees.avatars": false, "gitlens.views.searchAndCompare.avatars": false, "gitlens.graph.avatars": false, "gitlens.views.commitDetails.avatars": false, "gitlens.views.repositories.avatars": false, "workbench.tree.indent": 16, "workbench.editor.empty.hint": "hidden", "window.density.editorTabHeight": "compact", "scm.showIncomingChanges": "never", "debug.openDebug": "neverOpen", "debug.toolBarLocation": "commandCenter", "codeium.enableExplainProblem": false, "files.autoSaveWhenNoErrors": true, "editor.mouseWheelScrollSensitivity": 1.2, "editor.overviewRulerBorder": false, "files.trimTrailingWhitespace": true, "editor.suggest.insertMode": "insert", "debug.showBreakpointsInOverviewRuler": true, "C_Cpp.experimentalFeatures": "enabled", "vim.foldfix": true, "codeium.enableCodeLens": false, // "extensions.webWorker": false, "npm.autoDetect": "off", // "extensions.experimental.affinity": { // "vscodevim.vim": 8, // "ms-vscode.cpptools": 1, // "Codeium.codeium": 2, // "eamodio.gitlens": 3, // "vscode.npm": 4, // "alefragnani.Bookmarks": 5, // "tamasfe.even-better-toml": 5, // "bierner.markdown-checkbox": 5, // "PKief.material-icon-theme": 5, // "Gruntfuggly.todo-tree": 5, // "ms-python.vscode-pylance": 5, // "rust-lang.rust-analyzer": 5, // "vscode.typescript-language-features": 6, // "esbenp.prettier-vscode": 7 // }, "window.menuBarVisibility": "compact", "terminal.integrated.fontWeightBold": "normal", "prettier.semi": true, "vscodesnap.windowControlStyle": "OS X", "vscodesnap.windowTitleStyle": "None", "vscodesnap.backgroundPalette": "custom", "vscodesnap.containerBackground": "#2c79dc", "gitlens.blame.heatmap.enabled": false, "gitlens.blame.highlight.locations": [ "gutter", "line", "overview" ], "diffEditor.ignoreTrimWhitespace": true, "remote.localPortHost": "allInterfaces", "remote.autoForwardPorts": false, "C_Cpp.loggingLevel": "Debug", "C_Cpp.default.compilerPath": "e:\\Visual Studio\\VC\\Tools\\MSVC\\14.38.33130\\bin\\Hostx64\\x64\\cl.exe", "gitlens.launchpad.indicator.enabled": false, "editor.lightbulb.enabled": "off", "remote.forwardOnOpen": false, "codeium.enableCommandSideHintEducation": false, "editor.stickyScroll.enabled": false, "terminal.integrated.suggest.enabled": true, "breadcrumbs.enabled": false, "symbols.hidesExplorerArrows": false, "typescript.preferences.preferTypeOnlyAutoImports": true, "editor.acceptSuggestionOnCommitCharacter": false, "workbench.editor.showTabs": "single", "workbench.editor.showIcons": false, "workbench.iconTheme": null, "breadcrumbs.icons": false, "files.trimFinalNewlines": true, "workbench.commandPalette.history": 0, "workbench.editor.limit.enabled": true, "search.quickOpen.includeHistory": false, "workbench.editor.limit.value": 1, "workbench.editor.limit.perEditorGroup": true, "vim.highlightedyank.enable": true, "explorer.fileNesting.enabled": true, "explorer.fileNesting.patterns": { "*.ts": "${capture}.js, ${capture}.typegen.ts", "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts", "*.jsx": "${capture}.js", "*.tsx": "${capture}.ts, ${capture}.typegen.ts", "tsconfig.json": "tsconfig.*.json", "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb", "*.mts": "${capture}.typegen.ts", "*.cts": "${capture}.typegen.ts" }, "remote.autoForwardPortsSource": "output", "editor.fontSize": 15, "editor.codeActionsOnSave": { "source.removeUnusedImports": "explicit", "source.organizeImports.biome": "explicit" }, "editor.guides.indentation": false, "editor.renderLineHighlight": "none", } ```

We had this bug 1 month ago, but fixed it. I'm not able to reproduce this anymore.

You mean the fix available in VS Code insiders? I'm here on latest VS Code stable.

[tusharsnx]

Note: It only breaks when the file has "problems" (red squiggles) so the tab title would be "\<filename> \<filepath> 2, M" (2 problems in this file (bullet) Modified)

[bpasero]

Can you try to reproduce with our nightly insider builds? You can give our preview releases a try from: https://code.visualstudio.com/insiders/

[tusharsnx]

On VSCode Insider it breaks once I apply my existing settings.json from stable. I've to dig into what is causing the problem 😴

[tusharsnx]

Minimal setting.json for repro:

{
    "workbench.editor.showTabs": "single",
    "breadcrumbs.enabled": false,
}

Edit: You will still need a file with some red squiggles and git version control active

[bpasero]

Bisect points to https://github.com/microsoft/vscode/compare/a162831c17ad0d675f1f0d5c3f374fd1514f04b5...9d28a232cb0a08aa0545b3bcc47184ae2f521ea2

I would think this is from https://github.com/microsoft/vscode/commit/f621492f66a6d93d4dece230b06d9d95312809fb

[tusharsnx]

This should also include white-space: nowrap here so that badges (stitched together with a ',' and spaces) do not wrap:

https://github.com/microsoft/vscode/blob/804f450ca900d24db25e7174e8b6dfb3fb2a318c/src/vs/workbench/services/decorations/browser/decorationsService.ts#L111

[benibenj]

Thank you for looking into this @tusharsnx. that seems to make sense, I'll validate it tomorrow and push a fix if it is that simple

[vs-code-engineering[bot]]

This bug has been fixed in the latest release of VS Code Insiders!

@tusharsnx, you can help us out by commenting /verified if things are now working as expected.

If things still don't seem right, please ensure you're on version 39fd376a04ae461e1abb4212d6395d7a56959198 of Insiders (today's or later - you can use Help: About in the command palette to check), and leave a comment letting us know what isn't working as expected.

Happy Coding!

[tusharsnx]

I can confirm the issue is fixed. /verified