Website: Desktop UI broken by overflow-x: scroll;

[chenopis]

This is a...

• [ ] Feature Request
• [X] Bug Report

Problem:
There is an extra gray bar underneath the secondary nav and search box when using Chrome desktop. I'm seeing this:

If you compare the two deploy previews:

• https://deploy-preview-10071--kubernetes-io-master-staging.netlify.com/docs/home/?path=users&persona=app-developer&level=foundational
• https://deploy-preview-10072--kubernetes-io-master-staging.netlify.com/docs/home/?path=users&persona=app-developer&level=foundational

It seems to change in PR #10072 .

Proposed Solution:

If it turns out to be a desktop vs mobile issue, then target overflow-x: scroll; to just mobile devices.

Page to Update:
https://kubernetes.io/docs/home/?path=users&persona=app-developer&level=foundational

[zacharysarah]

/assign @tnir

https://github.com/kubernetes/website/pull/10072#issuecomment-431521375

[jamesgeorge007]

@zacharysarah @chenopis In fact, I would love to take this up :smile:

[zacharysarah]

@jamesgeorge007 Go for it! 🚀

[tnir]

@chenopis Thanks. With Chrome on Windows, you might see it. With Chrome, Firefox, and Safari on Mac, I don't see any bar there.

[jamesgeorge007]

@tnir @chenopis @zacharysarah Made the required workarounds :+1:

[chenopis]

@chenopis Thanks. With Chrome on Windows, you might see it. With Chrome, Firefox, and Safari on Mac, I don't see any bar there.

Just for clarification, I'm using Chrome on a Mac and I do see it.

[chenopis]

After the conflicts were resolved in PR #10688, the fix no longer worked in the preview build. Consequently, even though that PR was merged, I still see the problem on the website.

[chenopis]

/cc @jamesgeorge007

[jamesgeorge007]

@chenopis I used node-sass to compile down sass to css which didn't work as intended. I had submitted another PR resolving the issue :+1:
Sorry for the trouble