doc engine: fix scroll bar for the content sidebar

[iKBAHT]

Fixes #1198

[shcheklein]

@iKBAHT thanks! great.

A few things I noticed so far:

1. Katacoda button should not be part of the scroll I think

2. CONTENT - - should not be part of the scroll probably. It'll become a back to the top of the page. (related nav: create title entry in right CONTENTS ToC sidebar gatsby-theme-iterative#37 )

3. Can we make buttons go right after the sidebar as it was before. The reason here is we need to keep them as visible as possible. Especially "Katacoda" if it's visible.

[iKBAHT]

I implemented noticed things. Also, I decrease distance between buttons from 25px to 15px. Otherwise, buttons block take too many heights with Katacoda block.

[shcheklein]

@iKBAHT looks great overall, one more question - right now when there are some items that are hidden - sometimes it is not obvious that they exist (scroll is hidden). I kinda like that scroll is hidden, but is there a way from a user perspective to see that there is something below and you can scroll it ...? what do you think?

[iKBAHT]

I think the best way, in this case, is to always show a scroll bar if it exists.

[iKBAHT]

I don't even know how else to show the user that there is something below

[shcheklein]

@iKBAHT yeah, I was thinking to try some fade out and show scroll when you hover over it.

The problem with always showing it is that it looks like a border line in some cases (when it's almost full) :)

Anyways, not a big deal - let me know if it's easy to try those two things ... otherwise I think we cab merge it as is.

[iKBAHT]

Fade-out is not a common practice, users are familiar with scrolls. Also, fade-out takes an already limited amount of space.
A solution with scroll is very easy to implement.

[shcheklein]

A solution with scroll is very easy to implement.

yep, works for now

One more thing we need to think and take care of:

We need to scroll into view the highlighted element when we open a link like this (and screen is not large enough).

https://dvc-landing-fix-scroll--bt87yn.herokuapp.com/doc/command-reference/fetch#example-with-dependencies

or as we scroll the screen and some items are not visible

[iKBAHT]

We need to scroll into view the highlighted element when we open a link like this

done

Also, during implementation, I found the new bug #1306

[jorgeorpinel]

Also, during implementation, I found the new bug #1306

Probably the same as iterative/gatsby-theme-iterative#38 🙂

[shcheklein]

Something funny is happening - when I open https://dvc-landing-fix-scroll--bt87yn.herokuapp.com/ and click docs I'm getting:

Note - no Home entry, Content went under the menu

[shcheklein]

@iKBAHT please check the deployed version (https://dvc-landing-fix-scroll--bt87yn.herokuapp.com/) - all the navigation is quite broken for me.

[iKBAHT]

Yes, it's my fail. I tested only when scroll exists.

[shcheklein]

@iKBAHT still see some problems - https://dvc-landing-fix-scroll--bt87yn.herokuapp.com/doc/command-reference/fetch

[shcheklein]

Looks like scroll is not always visible as expected in Firefox

Also getting this:

(It hides the text)

In Safari - it always scrolls the page for me, even if mouse pointer located on top of the sidebar area.

Also, it does not scroll the selected item into view after navigate? Am I missing something?

[iKBAHT]

• I wasn't aware of the need to maintain FF. But anyway FF doesn't support "force" render scrollbar.

• In Safari - it always scrolls the page for me, even if mouse pointer located on top of the sidebar area.

It's standard behavior, chrome works the same way. I mean if block doesn't have it own scroll, then scroll goes to parent.

• Also, it does not scroll the selected item into view after navigate? Am I missing something?

Can you please write steps to reproduce. Everything works for me.

[shcheklein]

I mean if block doesn't have it own scroll, then scroll goes to parent.

In this case it looks like it happens even if block has its own scroll.

I wasn't aware of the need to maintain FF.

yes, we support all major browsers + iOS Safari + Android

Can you please write steps to reproduce. Everything works for me.

may be we talk about different problem. I mean that an item on the right sidebar should be scrolled into view (same as we do with the left sidebar).

[iKBAHT]

In this case it looks like it happens even if block has its own scroll.

Everything works for me. Can you share the problem somehow.

may be we talk about different problem. I mean that an item on the right sidebar should be scrolled into view (same as we do with the left sidebar).

I think it impossible. Right and left sidebars control by one scrollbar. And if scroll goes to the last article, and it short, the left bar also goes down with the whole page. It comes from main goal of this PR - "fix scroll bar for the content sidebar"

[shcheklein]

Okay 👌 Merging this as this is a great improvement anyway, and I will create a separate issue to describe improvements left. It'll be easier to iterate from this.