Browser-laptop: Arch linux: Scroll bar appears over tabs when they fill the tab bar

[dangerginger]

My search skills may have failed me, but I did not find this bug. I apologize if this is a duplicate.

Problem: After opening enough tabs (depends on window size) to fill the tab bar, a horizontal scroll bar appears that conceals the lower ~75% of the tabs. I am still barely able to switch tabs by clicking on the very top of the tab, but it is difficult to see which tab is which. The scroll bar is always "full", meaning it cannot actually scroll left or right no matter how many tabs there are. Closing or pinning tabs until they no longer fill the available space causes the scroll bar to disappear.

Expected behavior: The scroll functionality should not conceal the tabs, and should effectively scroll to tabs or tab groups that are not currently visible.

Platform: Arch Linux

Brave Version: v0.11.0

Steps to reproduce:
1. Open brave
2. Open multiple tabs until they fill the available space in the tab bar.
3. Observe the scroll bar covering the tabs.
4. Close tabs until the scroll bar disappears.

[bbondy]

PR wanted for this from someone who is running Arch Linux.

[bbondy]

It should be a pretty small CSS tweak maybe with overflow-x: clip or something like that

[babolivier]

Archlinux user here, I remember having this issue a while ago (even opened https://github.com/brave/browser-laptop/issues/1403), and didn't encountered it after that (even now, v0.11.0). I tried to reproduce it by pinning as much tabs as you have, then playing with the window's width, but couldn't:

@dangerginger How did you install Brave? AUR? If so, which package? (I use the brave-bin one, maybe with the one you're using it behaves differently because of the install procedure)

[dangerginger]

@babolivier, I initially installed the brave package from the AUR. As you suggested, I removed that and tried the brave-bin package but got the same behavior. I deleted the ~/.config/brave directory and restarted the browser, but also no change. I experience the same behavior in both i3 (tiling) and lxde.

@bbondy, I can look into fixing this but it would be my first PR. If you give me a hint on where I should look into this it would help me get started.

Thanks

[bbondy]

You can fix this by using the built in browser level dev tools.
The shortcut of this is changing soon, so if you see it stop working just check the recent commit history.
But for now you can use Control+Alt+J. Then you can use the DOM inspector on the tab bar and try to tweak it to fix just like for a web page.

Once you find the styles that need to change just git grep term for where to change it.

The README has information about first time setup.

[dangerginger]

Great. I will look into this over the weekend. Thanks for pointing me in
the right direction.

On Thu, Jul 21, 2016, 07:03 Brian R. Bondy [email protected] wrote:

You can fix this by using the built in browser level dev tools.
The shortcut of this is changing soon, so if you see it stop working just
check the recent commit history.
But for now you can use Control+Alt+J. Then you can use the DOM inspector
on the tab bar and try to tweak it to fix just like for a web page.

Once you find the styles that need to change just git grep term for where
to change it.

The README has information about first time setup.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/brave/browser-laptop/issues/2599#issuecomment-234262571,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOKj9-NASz34z00ZdaQDWV82WE3uNjTpks5qX3v8gaJpZM4JQamc
.

[bbondy]

awesome, thanks @dangerginger!

[dangerginger]

I found the CSS selector using the method you described and sent my first ever PR. You can tell it's the first one because I unfortunately named it 'patch-1'. Sorry about that. Not very descriptive.