Fix horizontal scroll on pages with vertical scroll

[Apollinaire]

Every page that has a vertical scroll also has a small horizontal scroll.
That is because of width: 100vw; on the header. Viewport width does not care about scroll bars, so when there are vertical scrollbars the header does not resize and overflows (by 15px on Chrome).
Replacing width: 100vw; by width: 100%; fixes this issue.

[coveralls]

Pull Request Test Coverage Report for Build 181

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 56.276%

---

Totals
Change from base Build 171:	0.0%
Covered Lines:	1255
Relevant Lines:	1960

---

💛 - Coveralls

[electerious]

I'm using 100vw because the menu should be scrollable on mobile. It doesn't work with 100% and I'm not sure how to get it working.

Here's an example: https://codepen.io/electerious/pen/mdbNwdp (simply replace 100% with 100vwand it's working as expected)

This sounds so simple, but it seems to be very complex when using display: grid.

[Apollinaire]

Thanks for the explaination. I'll look into it

[Apollinaire]

Could you take a look at this?
What I did :

• change the display on .body and #main to grid so that the header can keep scrolling without setting its width in vw
• wrap the two overlays in a new class called overlay that has display: grid and min-height: 100vh so that the overlays are displayed in grid and centered horizontally and vertically.

---

On a side note, I see that you are working on the develop branch, do you want me to make the PR on this branch rather than master?

Second side note: I'm not sure if you really work using this coding style (no jsx, module.exports = , require, 'use strict' ), but it makes it fairly difficult to contribute. If you don't use this coding style and are actually generating it with another version of the code, would you mind making it public, giving dev & contribution guidelines ?

[electerious]

Thanks for the changes. I will take a look at them by time!

I somehow still can't believe that there's no simple way to limit the grid size, so I need to give it a try too.

On a side note, I see that you are working on the develop branch, do you want me to make the PR on this branch rather than master?

That's ok for now, but develop would be better in the future.

Second side note: I'm not sure if you really work using this coding style (no jsx, module.exports = , require, 'use strict' ), but it makes it fairly difficult to contribute. If you don't use this coding style and are actually generating it with another version of the code, would you mind making it public, giving dev & contribution guidelines ?

Yes, I'm writing react like this 😃 I might be the only one who likes to use the createElement (h) function instead of JSX. I will add the eslint configs.

[electerious]

Adding grid-template-columns: 100%; to the grid layout seems to work: https://css-tricks.com/preventing-a-grid-blowout/

Could you give the develop branch a try?

[Apollinaire]

develop looks good to me, tested on android chrome & chrome on linux desktop!