Styling regressions in Notebook 7 tab bar

[JasonWeill]

Describe the bug
CSS issues in Notebook 7 tab bar include that:

1. There is no dark background (as in JupyterLab 4) in the space to the right of the rightmost tab.
2. The tab bar boundary is very slightly (1 pixel?) higher than the top of each individual tab
3. The rightmost edge of the tab bar slightly overhangs the right edge of the active tab's container.

To Reproduce
Steps to reproduce the behavior:

1. Launch Notebook 7
2. See behaviors above

Expected behavior
A clear and concise description of what you expected to happen.

1. There should be a darker background for the negative space than for any active or inactive tab.
2. The tab bar boundary should be even with or lower than the top of any tab.
3. The rightmost edge of the tab bar should be flush with the right edge of the active tab container, with a drop shadow to match.

Screenshots

See above

Desktop (please complete the following information):

• OS: macOS 12.6.3
• Browser: Firefox
• Version: 102.7.0esr

[jtpio]

Thanks @JasonWeill for reporting this 👍

There is no dark background (as in JupyterLab 4) in the space to the right of the rightmost tab.

Which JupyterLab component are you referring to? JupyterLab uses a DockPanel but Notebook 7 doesn't. Maybe that's why the styles are not applied here?

[jtpio]

Also wondering if we should follow the style used in Jupyterlab, or maybe try to be closer to the classic notebook UI: #6397

[jtpio]

FYI @JasonWeill #6738 made some tweaks to the file browser UI:

Which can be tested on Binder: https://mybinder.org/v2/gh/jupyter/notebook/main?urlpath=tree

Feel free to open an issue if you think there is still room for improvements, thanks!