Fix newly discovered CSS issues

[yangshun]

Motivation

Address the CSS issues uncovered by @chenglou in reasonml/reasonml.github.io#398.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

• Check that search input looks ok on all resolutions.
• Edit button vertically-aligned with the heading.
• Edit button hidden <1024px.

Related PRs

reasonml/reasonml.github.io#398

[yangshun]

@JoelMarcey We'll release v1.3.1 after this PR is merged.

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit a334a4b

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

[endiliey]

LGTM. Just realized we use 1023px and sometime 1024px in our css.

I am also not sure why we choose 735px for some part in our css, I thought the standard medium devices is 768px.

[yangshun]

Just realized we use 1023px and sometime 1024px in our css.

They should be max-width: 1023px and min-width: 1024px as the breakpoint. If you see something else, then it's 1px off.

I am also not sure why we choose 735px for some part in our css, I thought the standard medium devices is 768px.

Hmm I think it's iPhone 6, 7, 8+ landscape mode width. Source: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Anyway in future we can remove 736 and just anything below 1024 we show mobile view.