Contain the tabs within the tabbar (do not use translation transform)

[krassowski]

References

This is a prerequisite for full adoption of contain: strict jupyterlab/lumino#504.

Briefly, the current tab was using transform: translateY() style exceeding its box which means that we could not contain painting for it (i.e. it would have no effect).

Code changes

• Re-implement the bottom border using opt-in approach - elements which need bottom border get it in ::after pseudo-element rather than existing opt-out approach (element which should not have it is resized up and shifted down to cover the common border).
• Remove unnecessary CSS rule (.lm-TabBar-tab.lm-mod-current:hover)

User-facing changes

Removes the jitter of the tab title when switching the active tab.

Old (see how "Launcher" title moves down upon activation):

New (see no title movement upon activation):

Backwards-incompatible changes

I think it can be safely backported, but would appreciate a second opinion.

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[krassowski]

please update snapshots

[github-actions]

Galata snapshots updated.

[jtpio]

Kicking CI (#13505).

[jtpio]

I think it can be safely backported, but would appreciate a second opinion.

Looks like it should indeed be fine at first glance. Adding to the 3.6 milestone for consideration.

[fcollonval]

Thanks @krassowski

[fcollonval]

@meeseeksdev please backport to 3.6.x

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

git checkout 3.6.x
git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

git cherry-pick -x -m1 6ed59fc063442c9a919315e66b4ecd7735bc5326

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

git commit -am 'Backport PR #13671: Contain the tabs within the tabbar (do not use translation transform)'

4. Push to a named branch:

git push YOURFORK 3.6.x:auto-backport-of-pr-13671-on-3.6.x

5. Create a PR against branch 3.6.x, I would have named this PR:

"Backport PR #13671 on branch 3.6.x (Contain the tabs within the tabbar (do not use translation transform))"

And apply the correct labels and milestones.

Congratulations — you did some good work! Hopefully your backport PR will be tested by the continuous integration and merged soon!

Remember to remove the Still Needs Manual Backport label once the PR gets merged.

If these instructions are inaccurate, feel free to suggest an improvement.