Tabs: border-top is thicker in first column tabs compared to other rows

[bpasero]

That is because the grid-sash trick we are currently using is adding a ::before element that takes away 1px of the thickness of the border:

This might improve when the grid widget implements a way for me to specify the color of sashes (@joaomoreno )

[joaomoreno]

@bpasero The :before element isn't taking any space away. It uses a value of z-index > 0 so it gets drawn on top of the tab border (which isn't really a border but a box-shadow).

You seem to have a z-index problem, because the minimum z-index that makes the sash border go behind the tab border is 0. But with 0, vertical sashes don't appear at all... probably there's something z-index > 0 in the editor which covers them.

[joaomoreno]

That something is the actual monaco-editor instance... thought it doesn't set the z-index... it just follows DOM order. Hmmmm sad!

Unfortunately I don't have a great idea but to make the box-shadow 3px high, for tabs which are not on the first view.

[bpasero]

Unfortunately I don't have a great idea but to make the box-shadow 3px high, for tabs which are not on the first view.

@joaomoreno yeah, my thinking as well. Do you have a CSS rule I can use that makes that change only for those tabs that are in the grid in that position?

[joaomoreno]

Unfortunately not... Why don't you make the tab border push down its contents?

[bpasero]

😱

[joaomoreno]

So, instead of box-shadow, really use border-box.

[bpasero]

@joaomoreno even with a border-top: 1px solid red I need to use a 2px border for tabs that are below the sash-separator to make it show up.

[joaomoreno]

Oh. Damn! We might have to find that CSS rule then. 😆

[bpasero]

@joaomoreno yeah, in a text adventure I would simply do "Use Joao with CSS problem" and it would probably work.

[joaomoreno]

As discussed, let's add some information in the DOM to indicate where grid nodes are in the grid.

[joaomoreno]

Let's try to move the tab border to a :before: element, just like the splitview separator:

https://github.com/Microsoft/vscode/blob/master/src/vs/base/browser/ui/splitview/splitview.ts#L181

[joaomoreno]

@bpasero Good job!