Scroll bar not at the very right

[Nino-Bock]

What happened?

Websites are displayed in some sort of container that is in a frame. That frame however also is at the right which makes the scroll bar to not be at the very right of the screen. Such a design is very inconvenient as a user can not simply move the mouse to the very right edge of the screen to interact with the scroll bar but has to precisely aim at it.

On Firefox, this issue does not exist.

I have made sure that my browser was not a floating window but in full screen mode.

I am aware that most people do not use the scroll bar any more for browsing, however I still want to raise awareness that this issue exists.

Reproducible?

• [x] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.0

Severity impact

Low

What platform are you seeing the problem on?

Linux

Relevant log output

No response

[jasonyang-ee]

Additionally, this boarder / frame behavior has prevented user to park their mouse at the bottom or far right of screen while continue to scroll pages.

This impacts experience with user who prefer to not see their cursor while reading text heavy webpages.

Version

Version 1.0.0-a.34 (64-bit)

Platform

Windows

Area of Interest

[ritchielawrence]

+1 for both comments above Zen Browser 1.0.0-a.34 (64-bit) AppImage OS: Linux (Manjaro)

[IAmJafeth]

I have a solution for @jasonyang-ee no cursor scrolling issue.

You can install the following Zen Theme: https://zen-browser.app/themes/680424a8-a818-406b-98c5-7726214e2a9f It removes the browser padding which I just tested and solved that specific problem.

However, it does not adjust the scrollbar to the far right, so scrolling it with the cursor is still awkward even with the theme installed.

[jasonyang-ee]

@IAmJafeth Thank you!

So this pointed me to the theme setting direction. I also found that Diable Rounded Corners will give us the same desired result.

https://zen-browser.app/themes/c6813222-6571-4ba6-8faf-58f3343324f6

[Nino-Bock]

@IAmJafeth Thank you!

So this pointed me to the theme setting direction. I also found that Diable Rounded Corners will give us the same desired result.

https://zen-browser.app/themes/c6813222-6571-4ba6-8faf-58f3343324f6

Thank you, that somewhat solves it. I would still prefer it, if that was an option readily available for everyone without the need to stumble across a specific theme.

Also, this does not fix the left side, where the left most pixels are not part of the icons. That also makes them harder to hit. The "hitbox" of the buttons at the left panel should extend all the way to the left border.

[Dean-Corso]

So the problem is still not fixed yet. Normally when I browse I have the browser window maximized and when I want to scroll the page using mouse I have moved it on the total right side of the screen. But its not working with ZEN and I have to move the mouse few pixels to left to make it work. That's pretty annoying. ZEN is using a border of few pixels. But I also want to keep the round corners.

[berezki]

Can't you just make a scrollbar part of the right frame border? It would still look like rounded frame and work fine at the same time. Maybe make it expand a little bit on hover like scrollbars are doing now. Wondering if this could be done using custom CSS.

[Dean-Corso]

Not sure what the scrollbar class etc is to add some css style into custom userChrome.css file. Do you know or did anyone tried this already?

[jasonyang-ee]

God Damn.... This update has broken the temp solution.... I am sad.... @HarryHeres Can this issue get some love with assigning at least some level of severity?

This issue is incredibly annoying and is not inherited from Firefox engine, I would consider this as a bug.

[HarryHeres]

I will take a look into this later today.

[baiyanglevi]

I also hope the tab bar left side is at the very left without container padding. So that one can directly click on the very left instead of moving a little bit rightward to switch between tabs.

[HarryHeres]

So the padding is defined in here:
https://github.com/zen-browser/desktop/blob/2082079c7eca8b974c1f17a6cce8c22ee7e921c8/src/browser/base/content/zen-styles/zen-browser-ui.css#L13

Thus, you should be able to modify the paddings yourselves in userChrome.css like this:

#tabbrowser-tabpanels {
 padding: 0px;
}

Let me know if that works out for you.

[Dean-Corso]

Hi @HarryHeres,

so how should that padding help? So we talking about the scrollbars right. On the right side its not enough on the right side so that I have to move the mouse pointer few pixels to the left if I want to grab the scrollbar with mouse pointer or mouse scroll button. Other problem is the scrollbar next to the tabs (open many tabs) which we can not grab with the mouse pointer and its just moving the entire browser window instead. Also the scrollbar next to tabs is too thin. In the toolbox I could not change the CSS rules of them.

[HarryHeres]

If you override the padding, the content window will span fully to the border of the application window, thus removing the space between the scrollbar and the edge of the window.

[baiyanglevi]

Is that right (I'm sorry but i'm not a programmer)? If right, then it doesn't fix the problem, there's no change. I also tried "Remove Browser Padding" theme, it works a little bit but there's always a few px on the right and no change on the left.

"Disable round Corners" doesn't fix this also.

[HarryHeres]

Is that right (I'm sorry but i'm not a programmer)? If right, then it doesn't fix the problem, there's no change. I also tried "Remove Browser Padding" theme, it works a little bit but there's always a few px on the right and no change on the left.

"Disable round Corners" doesn't fix this also.

Sorry, try this

#tabbrowser-tabpanels {
    padding: 0px !important;
}

Make sure you don't include the /* symbols

[HarryHeres]

I also hope the tab bar left side is at the very left without container padding. So that one can directly click on the very left instead of moving a little bit rightward to switch between tabs.

This can be adjusted by adding the following into userChrome.css:

#navigator-toolbox {
    padding-left: 0px !important;
}

[HarryHeres]

Hi @HarryHeres,

so how should that padding help? So we talking about the scrollbars right. On the right side its not enough on the right side so that I have to move the mouse pointer few pixels to the left if I want to grab the scrollbar with mouse pointer or mouse scroll button. Other problem is the scrollbar next to the tabs (open many tabs) which we can not grab with the mouse pointer and its just moving the entire browser window instead. Also the scrollbar next to tabs is too thin. In the toolbox I could not change the CSS rules of them.

What do you mean by "scrollbar next to tabs"?

[baiyanglevi]

I tried, and the results is following:

1. With userChrome.css, without "Remove Browser Padding" theme it's like this:

2. With "Remove Browser Padding", without userChrome.css like this:

3. original:

The left vertical tab bar remains no change. One can't drag the very right side to scroll either.

edit1: On the left it works, but only for option “Expand the tabs by default", not for the other two options "expand tabs on hover/don't expand tabs".

Conclusion: userChrome.css shrinks the edge, but can't completely make it disappear. maybe it's not a userChrome related problem.

Anyway I appreciate your work. I love the Browser and hope it be better.

edit2: It's interesting to notice that when "Expand the tabs by default" is chosen, a small Padding above "back" "reload" appears, but when the other two options, the Padding above disappears, and on the left stays the Padding.

[Zerloth]

Well i found the solution, first i need to remove the padding manually using these 2 CSS

:root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
  & #tabbrowser-tabpanels {
    padding: 0 !important;
  }
}

@media (-moz-bool-pref: "zen.view.compact") {
  :root:not([customizing]) {
    @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
      &:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels {
        padding: 0 !important;
      }
    }
  }
}

But i think you could also do it in zen settings zen.theme.content-element-separation

After that also install Disable Rounded Corners in zen mods, this can help to remove some of the padding

Finally remove the scrollbar padding with this CSS

:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox {
  padding: 0px !important;
}

I added all the css inside the userChrome.css and this works for me

[baiyanglevi]

It seems work on the right but not the left. I tried the method from HarryHeres and his method works only on the left and for option "Expand Tabs by Default". The method you mentioned seems just doesn't work for me(left) despite the three "How to expand tabs" options. I think it's good to find a way to combine the two methods and make a little bit change.

[Dean-Corso]

@HarryHeres

What do you mean by "scrollbar next to tabs"?

I mean the scrollbars. Look at this image I made... ...on left side on vertical sidebar I have opened many tabs so that you will get an scrollbar to see next to the tabs. This SB is pretty thing displaying and I can't get it with the mouse pointer itself to move it up or down (not possible). When I double click on that SB area then the browser does change the window size (same like you would click double on title bar to change window size). So the SB next to tab is only a visual element for the user (not sure whether its done on purpose or a bug).

Next problem is the SB on the right side + having the browser window maximized (I always have). You see the SB bar + border on the outside. Normally when I try to scroll via mouse pointer + left mouse down I do move the mouse itself to the total right side area of the screen to grab the SB with the mouse (working for all browsers) but in case of ZEN its not working because of that few pixel outline border. I would like to remove that border on that side (keeping round corners) or make the SB thicker to overlap the border area or something like that if possible. Do you know what I mean now?

PS: One more question. At the top of my image you can see the "+ New Tab" button what creates a new tab. In a pre version of ZEN there was just a "+" button middle align without that "New Tab" text. So I would like to have that old style back to see just the "+" on the button middle align without text. Can you make a custom CSS rule for that? Thanks.

[HarryHeres]

Okay, so updated CSS settings for the tabs padding:

@media (-moz-bool-pref: "zen.tabs.vertical") {

    /* If not expanded */
    #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-user-hover="true"][zen-has-hover], #navigator-toolbox[zen-user-hover="true"]:focus-within, #navigator-toolbox[zen-user-hover="true"][movingtab], #navigator-toolbox[zen-user-hover="true"][flash-popup], #navigator-toolbox[zen-user-hover="true"][has-popup-menu], #navigator-toolbox[zen-user-hover="true"]:has([open="true"]:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded="true"]:not([zen-user-hover="true"]))) {
        min-width: 0px !important;
        width: fit-content;

        & #tabbrowser-tabs {
            & .tabbrowser-tab {
                margin: 0px !important;
            }
        }

    }

    /* If expanded, left side */
    #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-user-hover="true"][zen-has-hover], #navigator-toolbox[zen-user-hover="true"]:focus-within, #navigator-toolbox[zen-user-hover="true"][movingtab], #navigator-toolbox[zen-user-hover="true"][flash-popup], #navigator-toolbox[zen-user-hover="true"][has-popup-menu], #navigator-toolbox[zen-user-hover="true"]:has([open="true"]:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded="false"]:not([zen-user-hover="true"]))) {
        padding-left: 0px !important;
    }

    /* If expanded, right side */
    #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-user-hover="true"][zen-has-hover], #navigator-toolbox[zen-user-hover="true"]:focus-within, #navigator-toolbox[zen-user-hover="true"][movingtab], #navigator-toolbox[zen-user-hover="true"][flash-popup], #navigator-toolbox[zen-user-hover="true"][has-popup-menu], #navigator-toolbox[zen-user-hover="true"]:has([open="true"]:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded="false"]:not([zen-user-hover="true"])), #navigator-toolbox[zen-right-side="false"]) {
        padding-right: 0px !important;
    }
}

Regarding the scrollbars : The scrollbar width is defined system-wide, however there are options to adjust it.

1. layout.css.scrollbar-width-thin.disabled set to true
2. widget.non-native-theme.scrollbar.size.override will adjust the width of ALL scrollbars in the Zen Browser

Note that it is not possible to adjust the exact width of the scrollbar using CSS since Firefox 79 For that, we'd have to implement a custom solution

[HarryHeres]

Regarding the browser padding:

#tabbrowser-tabpanels {
    padding: 0px !important;
}

#tabbrowser-tabbox {
    padding: 0px !important;
}

This is the best I could achieve. Notably, I was able to reproduce the issue on regular Firefox on Linux, therefore this does not seem to be Zen specific. I don't have any other ideas on how to improve the padding other than somehow removing the window borders as well.

[AMINOV99]

Regarding the browser padding:

#tabbrowser-tabpanels {
    padding: 0px !important;
}

#tabbrowser-tabbox {
    padding: 0px !important;
}

This is the best I could achieve. Notably, I was able to reproduce the issue on regular Firefox on Linux, therefore this does not seem to be Zen specific. I don't have any other ideas on how to improve the padding other than somehow removing the window borders as well.

Thank you so much this one worked ur the goat Harry

[Dean-Corso]

Hello @HarryHeres,

thanks for trying to find a method to change the SBs but its not really helpfully because I still can't access the scrollbar with the mouse pointer to move it up or down. I think its really a bug. In case of the right side SB it's also pretty thin to grab it with the mouse pointer. Anyway, I think there is no solution for that without to change the layout itself.

What about that "+ New Tab" button? Did you found a way to mod that (remove "Name Tab" string and putting the "+" in middle of that button)? Thanks.

[jasonyang-ee]

@HarryHeres Love you so much.

For those less technical, here is a quick summary.

File

userChrome.zip

Steps

[AMINOV99]

Hello @HarryHeres,

thanks for trying to find a method to change the SBs but its not really helpfully because I still can't access the scrollbar with the mouse pointer to move it up or down. I think its really a bug. In case of the right side SB it's also pretty thin to grab it with the mouse pointer. Anyway, I think there is no solution for that without to change the layout itself.

What about that "+ New Tab" button? Did you found a way to mod that (remove "Name Tab" string and putting the "+" in middle of that button)? Thanks.

You can make the scrollbar wider

Regarding the scrollbars : The scrollbar width is defined system-wide, however there are options to adjust it.

layout.css.scrollbar-width-thin.disabled set to true

widget.non-native-theme.scrollbar.size.override will adjust the width of ALL scrollbars in the Zen Browser

By applying all these it's perfect for me now i can scroll when i put the mouse all the way to the right and the scrollbar is wide enough when i set it to 20 in widget.non-native-theme.scrollbar.size.override

[HarryHeres]

Hello @HarryHeres,

thanks for trying to find a method to change the SBs but its not really helpfully because I still can't access the scrollbar with the mouse pointer to move it up or down. I think its really a bug. In case of the right side SB it's also pretty thin to grab it with the mouse pointer. Anyway, I think there is no solution for that without to change the layout itself.

What about that "+ New Tab" button? Did you found a way to mod that (remove "Name Tab" string and putting the "+" in middle of that button)? Thanks.

There's no reason why this shouldn't work for you. Did you restart the browser? Are you on the latest? Also, what platform are you on?

[SoulxSlayer]

Regarding the browser padding:

#tabbrowser-tabpanels {
    padding: 0px !important;
}

#tabbrowser-tabbox {
    padding: 0px !important;
}

This is the best I could achieve. Notably, I was able to reproduce the issue on regular Firefox on Linux, therefore this does not seem to be Zen specific. I don't have any other ideas on how to improve the padding other than somehow removing the window borders as well.

@HarryHeres just installed the new update, and that broke this solution.