Bug: Docs site "return to top" button overlaps language dropdown

[nzakas]

On the docs site, if you scroll all the way down on a page in a desktop browser, the "return to top" button overlaps the controls on the lower-right.

I'm not sure how to fix this. Maybe the button should appear to the left of that vertical line? Maybe it should stop before all of the controls in the lower right? Other ideas?

[Tanujkanti4441]

We may shift the button a bit higher so it can be placed just between the theme switcher and language switcher.

[harish-sethuraman]

I'm not sure how to fix this. Maybe the button should appear to the left of that vertical line?

I also align with doing this as we do this in mobile. having it in content seems better than shifting the positions in controls. Lets once check on how the UI looks also.

[nzakas]

@Tanujkanti4441 I think we would end up with the same problem, only the button would overlap the controls above it depending on the vertical scroll position.

[Tanujkanti4441]

@Tanujkanti4441 I think we would end up with the same problem, only the button would overlap the controls above it depending on the vertical scroll position.

Agreed! It will somehow overlap the controls. Then if we planning to make it appear on the left of the vertical line i am with @harish-sethuraman we first should check how it is appearing there. And for mobile we can keep it's position as it is currently.

[nzakas]

Agreed. We always want to see how things look first before making a change.

[Tanujkanti4441]

Here are the screenshots after shifting the return to top button to the left of the vertical line.

screenshot 1

screenshot 2

screenshot 3

screenshot for below 1024px screen size

screenshot 1

screenshot 2

For me it's looking good.
In this case (left of the vertical line) this button could have looked mysterious as it is somewhere in the middle of the screen but that vertical line saves it from looking such.

[nzakas]

Thanks for putting that together. I think the button overlapping the code sample is problematic because that's the area that we have the "Open in Playground" button on the rules documentation pages. 🤔

[Tanujkanti4441]

Thanks for putting that together. I think the button overlapping the code sample is problematic because that's the area that we have the "Open in Playground" button on the rules documentation pages. 🤔

yes, for the screen below 1024px it is overlapping the playground button, but not completely.

Even if we see in mobile size it is overlapping the texts or playground button. and in these cases users just have to scroll a bit.

Or alternatively we can shift that button to the right of the screen.

[nzakas]

I think it's okay if the button overlaps things you can't click, I just don't want it overlapping things you can click. Maybe something like this?

[Tanujkanti4441]

I think it's okay if the button overlaps things you can't click, I just don't want it overlapping things you can click. Maybe something like this?

if this is the case we can shift button's position on different frame size easily. but not sure about if we compromising with UI.

i have also tried an approach please have a look.

we can place that button to the corner of the right side like this

and can increase it's width on hovering.

even if we apply it for the mobile also then it will prevent the playground button to be overlapped.

[nzakas]

Hmmm, I'm not a fan of attaching the button to the right margin. It's too easy to miss.

[Tanujkanti4441]

It's too easy to miss.

Possible!
Then i make PR based on above discussion.