New tab button should not be part of the scrolling tabs on sidebar

[mr-cheffy]

What feature would you like to see?

Currently the New Tab button can be hidden if a lot of tabs are open and you scroll up. It should not do this and instead be achored on the sidebar on it's position. Either this or have it as an option (I personally see it as a bad thing).

What platform are you seeing the problem on?

Windows

Additional context

Scrolled down to the very bottom:

Then, if I scroll a little bit up:

It get hidden because it currently scrolls with the open tabs on the sidebar.

Pls fix :)

~ Created automatically from issue: #527

[ovachiever]

I agree with this, poor UI decision; new tab button should be anchored within a container above the vertical tabs, or as part of the top of the vertical toolbar container.

[Doc-4]

I agree, any fixed UI placement would be preferable to being able to scroll the new tab button out of view.

[badjuice]

A bit off-topic but related:

I have now noticed that the pinned tabs also get hidden by scrolling down. On Microsoft Edge, when using vertical tabs, after pinning some tabs, these are preserved as fixed on the tab list so they are always reacheable.

I'm now finding myself having to scroll back up through a lot of tabs to get to the top ones. It kinda defeats the point of having them pinned 😅 I could just leave them as the first opened tabs and it would be the same. The pinning should make that difference.

What I mean (notice the scrollbar - I am scrolled a bit down):

This is on Microsoft Edge ☝🏽

Currently on Zen:

Some of the tabs are hidden.

[Starry-AXQG]

_有点_题外但相关：

我现在注意到，向下滚动时，固定的标签页也会被隐藏。在 Microsoft Edge 上，使用垂直标签页时，固定某些标签页后，这些标签页在标签页列表中会保留为固定状态，因此始终可以访问它们。

我现在发现自己得往上翻好多标签页才能找到最顶部的标签页。这有点违背了把它们固定的意义 😅 我可以直接把它们设为最先打开的标签页，效果应该一样。固定标签页应该能带来这种区别。

我的意思是（注意滚动条 - 我向下滚动了一点）： 这是在 Microsoft Edge 上☝🏽

目前在 Zen 上： 一些标签被隐藏了。

Yes. But you have triedAdd to Essentials?This function is truly equivalent to the fixed tabs of other browsers

[azulika]

I agree. This must be implemented

[azulika]

I made a very rough workaround css. It won't work if "move the new tab button to the top" is enabled.

#tabs-newtab-button {
    position: fixed;
    bottom: 70px;
    z-index: 100;
}

#tabs-newtab-button::before {
    content: '';
    display: block;
    height: 1px;
    background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
    width: 100%;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

#tabbrowser-arrowscrollbox {
    padding-bottom: 50px;
}

hbox#tabbrowser-arrowscrollbox-periphery::before {
    display: none !important;
}

#tabbrowser-arrowscrollbox[orient="vertical"] {
    &[overflowing]:not([scrolledtoend]) {
        mask-image: none !important;
    }
}

[badjuice]

There has been added a separate scroll bar to each of the sections (pinned tabs and regular tabs) and the "New tab" button is not yet anchored to the bottom of the opened tabs list. 🤷🏽‍♀️

[Starry-AXQG]

Guys, I've tried some methods. It seems that I can't solve this problem well through third-party means at present. However, we can still select "New TAB" by using the shortcut key "Ctrl+T" or right-clicking on any TAB.
If you want to change the behavior of creating a new TAB page to opening a new page, please:about:config，searchzen.urlbar.replace-newtabset as false

[Damglador]

A fix using userChrome.css:

#tabbrowser-arrowscrollbox-periphery {
  position: sticky;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--zen-main-browser-background-toolbar);
  width: var(--zen-sidebar-width) - 5;
  z-index: 10;
}

It stays at the top or bottom (depending on Zen settings) when you scroll past it. The background may not match the theme though, I couldn't figure out how to do that properly.