Overflow-x issue on Blog/2020/static-hoisting.js

Context

Initially I thought the overflow-x issue included all the blog posts but it was only for the latest blog post Static Hoisting

That led me to believe that the issue wasn't in the default styles of the website but rather something specific in the 'Static Hoisting' blog post.

The bug happens due to the following code on static-hoisting.js

<div style={{ marginTop: "30px", height: "710px" }}>
      <div
        style={{
          position: "absolute",
          left: 0,
          width: "100vw",
          background: "#eee",
          padding: "30px 0 35px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <div className="mobile-diagram-wrapper">
          <Diagram />
        </div>
      </div>
    </div>

As far as I understand, the fact that we have a vertical-scrolling bar means that width: 100vw will exceed the available screen size because of the vertical scrolling bar taking a finite amount of space.

While not an absolute authority, Stackoverflow seems to support my assertion.

My suggested fix would be simply using

max-width: 100%

Although it is only a two character change I'm submitting a PR so I can include this under my resume/achievements.

rauchg / blog

Overflow-x issue on Blog/2020/static-hoisting.js #47