x/website: sidebar overlaps with footer on short screens

[ankit-verma-209171]

What is the URL of the page with the issue?

https://go.dev/solutions/clis

What is your user agent?

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Screenshot

What did you do?

I was exploring use cases for the Go Language and the cli section on go.dev and found this issue

Steps to reproduce:

1. go to any specific use-case page on the website eg. why go -> use cases -> clis
2. scroll down to the bottom of the page
3. can see the overlapping aside section with footer

Can be reproducible for Chrome, and also on Edge browser

What did you expect to see?

content - aside section should not overlap with footer

What did you see instead?

overlapping content - aside section with footer

On inspecting the css, I found fixed position in the .UseCaseSubNav-anchorLinks--sticky class might be the cause
refer https://github.com/golang/website/blob/master/_content/css/styles.css#L3646-L3649

.UseCaseSubNav-anchorLinks--sticky {
  position: fixed;
  top: 2rem;
}

Possible Fix

While experimenting, I found that changing the position to sticky from fixed solves this issue

.UseCaseSubNav-anchorLinks--sticky {
  position: sticky;
  top: 2rem;
}

[mknyszek]

CC @golang/tools-team

[IanoNjuguna]

This is how it looks on my end
The client is: Linux Mint OS and Mozilla Firefox browser

[hyangah]

Thanks @ankit-verma-209171 for the detailed report.

cc @jamalc

[ankit-verma-209171]

I have attached a pull request (golang/website#190) to this issue that resolves this issue. The pull request was moved to Gerrit (https://go-review.googlesource.com/c/website/+/464015) for the code review seven days ago still no review or comment; as it is my first time contributing to the Golang website, I need help and guidance on how to proceed further and would love feedback on the pull request.

I've test run the website with the changes locally using the codespace environment.
Thanks