[Docs] GitHub Button in Docs Header not responsive

Describe the bug When viewing the docs at chakra-ui.com on mobile, the GitHub button showing the number of stars isn’t responsive and forces the other header buttons out of the view.

Expected Behavior The header should look nice on mobile, without the badge being too big and forcing other buttons out of the view.

To Reproduce

1. Go to chakra-ui.com on mobile
2. See header in nav bar

Suggested solution(s) The GitHubButton has a Box parent, so using responsive props we can simply add the following to Box:

display={["none", "flex"]}

This removes any need to do any more mobile detection or CSS. Open to hear other suggestions though as it’s a bit annoying to have to declare flex explicitly.

Desktop (please complete the following information):

• OS: iOS
• Browser: Safari
• Version: iOS 13.3, iPhone XS

Additional context Perhaps this could be put in the footer instead?

[jackleslie]

@segunadebayo force pushed to the same PR #502

[segunadebayo]

@jackleslie, sure that’s fine as well. Kindly submit a PR