Fix navigation collapse on IE11

[ahmadalfy]

Motivation

Cross browser compatibility sets good example in open source projects. There are few issues happening in Internet Explorer 11 that blocks the usage of the website for its users.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

This PR will mostly be about UI changes that would affect CSS only. Plans for testing would be testing the UI on IE11 and another major browser (like Chrome) to ensure the updates doesn't break the new browsers as well as testing on mobile device.

Related issues

#585

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit be75fa0

https://deploy-preview-641--docusaurus-preview.netlify.com

[ahmadalfy]

Before:

After:

The reason:

flex: 1 on IE11 automatically set the flex-basis value to 0 without units on IE11. This leads to the collapse of the element and disallowing it from expanding and taking the size it should. This is a known issue on IE11 and usually countered by using flex: 1 1 auto in order to prevent that behavior

[yangshun]

Awesome! Test it on Chrome and it works the same.

[ahmadalfy]

My bad @yangshun

Should I remove the project and fork it again to avoid having the other PR commits on this one as well?

[yangshun]

@ahmadalfy From your screenshots, the font looks bad. The screenshot in #585 doesn't look that bad. We want to use the system font if possible. Could you help to look into it and fix it if possible? Ideally we want to emulate GitHub, which also uses system fonts.

[yangshun]

@ahmadalfy It's fine, I rebased it for you and it's ok now. You'll have to branch off latest master for your new PRs or rebase on master in future.

[ahmadalfy]

Yes I already fixed that and it is coming on the next commit ;)

[yangshun]

Please title your PRs according to the specific fix you are making 😄

[zenflow]

Great work @ahmadalfy .. much appreciated!

[ahmadalfy]

@zenflow most welcomed ❤️