Horizontal scrollbar is broken.

[panzi]

• VSCode Version: 1.44.2 ff91584 x68
• OS Version: Fedora Linux 5.6.8-200.fc31.x86_64

Steps to Reproduce:

1. Write code that is longer than one screen and wider than one screen
2. Try to drag the hotizontal scrollbar to the end of the long line

Does this issue occur when all extensions are disabled?: Not sure.

I launched code --disable-extensions and now the bug doesn't even occur with extensions enabled again anymore. Weird.

Here is a video that demonstrates the issue:
https://www.youtube.com/watch?v=iljabc6RusA

[alexdima]

@panzi I have tried to reproduce, but could not, clicking and dragging the scrollbar works fine for me. From your video, it is not clear to me if you click on the scrollbar or like 1px above it.

Please let me know what else I should do to try to reproduce.

[panzi]

I clicked when the scrollbar got highlighted. I assumed the mouse is over the scrollbar when it's highlighted. There are like two pixels that I can actually click for it to recognize the scrollbar, because most of it is an invisible drag handle to drag in a shell.

Another video where you can see how exact you have to hit the scrollbar and it still didn't work right: https://www.youtube.com/watch?v=MwcPAfBkqSE

[alexdima]

@joaomoreno I don't know if you're the person for this, but I can also reproduce that the "drag the panel" area is completely over the editor scrollbar. I wonder why could we not move this to be more over the status bar since that is higher than the scrollbar and has more pixels to click on.

[joaomoreno]

@alexdima While I don't dispute the fact that the sash is on top of the horizontal scrollbar, which it is:

I believe the user isn't talking about the sash, but rather that there seems to be a mismatch between the sash being highlighted and being hit on: when they click and drag it's as if they're setting and dragging the editor cursor, instead of the scrollbar handling the event. Maybe some strange browser rounding error due to a device pixel ratio of >1?

---

Nevertheless, placing the sash on top of the status bar also doesn't seem to be a good solution. Instead of moving it 2px down, how do you feel about making the horizontal scroll bar 2px taller?

[alexdima]

Nevertheless, placing the sash on top of the status bar also doesn't seem to be a good solution

Why not? The status bar is most of the times empty and not clickable, while the scrollbar is always clickable. What is especially ugly here is that the scrollbar reacts to the mouse hover and fades in, making it appear ready to be responsive to the click, but then the click doesn't reach it.

Instead of moving it 2px down, how do you feel about making the horizontal scroll bar 2px taller?

👍 We can also do this.

[joaomoreno]

What is especially ugly here is that the scrollbar reacts to the mouse hover and fades in, making it appear ready to be responsive to the click, but then the click doesn't reach it.

But it doesn't seem to be because of the sash: otherwise the sash would be moved, instead of the text being selected, right?

[alexdima]

@joaomoreno I cannot reproduce the initial issue in the opening post. I would fix it if I could reproduce. But then the discussion expanded and we landed on how the scrollbar is covered by the sash in the bottom... Can you reproduce the issue from the opening post?

[joaomoreno]

I also can't repro it. I have plenty of space to select the scrollbar and it seems to always work as the hover feedback predicts it to work.

So, let's pump the editor's horizontal scrollbar height?

[joaomoreno]

Related to #84315 (comment)

[joaomoreno]

Sash was moved to be on top of both the editor and the status bar, half half.

[alexdima]

I've also increased the default height from 10px to 12px, so whereas before there were 6px to hit the horizontal scrollbar (10px-4px), now there should be 10px (12px-2px).