Tab wrap - tab should not fill all spare space when wrap to new line

[heartacker]

The latest row should have consistent behavior with the single row

[bpasero]

@heartacker the reason tabs currently grow is the following pattern that imho is a bit unpleasant otherwise:

As you can see each row would have an uneven gap on the right hand side.

As a workaround, if you configure "workbench.editor.tabSizing": "shrink" tabs will have a fixed width and not grow:

[gjsjohnmurray]

@bpasero how about making them grow on every line except for the last one?

[bpasero]

@gjsjohnmurray this is a good idea but to my knowledge there is no CSS rule that we could leverage here because the wrapping is entirely done via the flex layout of the browser. Best we can do is control the growing for the last tab, but not all tabs of the last row.

@sneakyfish5 and @DynDux fyi for CSS tricks maybe I am missing something here.

[bpasero]

From #106448 (comment)

[jmannanc]

Here's an accompanying visual for @DynDux's proposed change:

[heartacker]

Here's an accompanying visual for @DynDux's proposed change:

great

[bpasero]

Nice, I suggest to continue via a PR.

[bpasero]

@sneakyfish5 @DynDux given we also have #113926 as an issue I wonder if we should revisit the editor actions toolbar altogether when tabs wrap: what if we simply treat the editor actions toolbar as a "tab", always being the last "tab" in the strip. This would:

• avoid having to use the margin-right hack an absolute positioning as the actions would then always appear last
• fix Wrapping tabs: editor toolbar bleeds into tab when space is limited #113926 by automatically wrapping these actions to the next line when space is little
• fix this issue: we could configure this last "fake" tab to always fill the remaining space

Thoughts?

PS: this solution would probably not work for when wrapping is disabled, so it has to be a custom solution only when wrapping is on.

[DynDux]

@bpasero I commented on PR #113926 but see it's closed. So here again:

If the editor actions are just a tab, a clean css-only solution is easy. I created a new fiddle and tried to use the original class names and structure. I also commented the relevant css parts for the layout. Hope it is clear - otherwise please let me know what else you need:

https://jsfiddle.net/seywr7m9/

[bpasero]

Yeah thanks, I think the biggest challenge is the actual implementation of the editor actions being a "fake" tab. Unfortunately that is not "just" a CSS change (as far as I can tell), but needs a bit of coding and care because lots of operations assume that the children in the tabs container are all tabs, and not "fake" tabs.

[jjspace]

Any update on this? I like the idea of wrapping tabs but the expanding last row is really throwing me off

[DynDux]

@jjspace Until a fix is merged, you can use the extension "Custom CSS and JS Loader" with the following css snippet as a workaround:

.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab.sizing-fit {
  flex-grow: 0;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container::after {
  content: '';
  flex-grow: 20;
}

[bpasero]

Instead of patching our CSS (which we strongly advise against), please see an easy solution via settings in #113801 (comment)

[DynDux]

Sorry - of course you are absolutely right! I didn't want to give bad advises and messing with the app shouldn't be done.
I just wanted to help jjspace because setting the "Tab Sizing" to shrink will cut off the filenames which, although intended by the setting, maybe sometimes looks confusing:

If I can help to improve the behavior, please let me know!

[clottman]

Does using "workbench.editor.tabSizing": "shrink", along with "workbench.editor.wrapTabs": true, still work?

When I add in the tabSizing: shrink option, the wrap tabs setting is ignored entirely and everything goes back onto one line.

[bpasero]

@clottman yeah that should still work, are you using stable or insiders of VSCode?

[clottman]

I'm on stable, on mac. Here's some info about my setup:

Version: 1.53.2
Commit: 622cb03f7e070a9670c94bae1a45d78d7181fbd4
Date: 2021-02-11T11:45:54.515Z
Electron: 11.2.1
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Darwin x64 20.2.0

[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/

[clottman]

Huh, my computer updated this morning from Mac OS 11.1 to mac OS 11.2.1 and it works now, without trying the nightly insider build. Strange.

Thanks for your help!

[bpasero]

via 3c62a8f the growing of tabs now only applies to the last tab in a row (except for the last row) and the overall result is a much calmer tab sizing behaviour when tabs wrap:

Before

After