query-editor loads as collapsed

In my deployment, I’ve noticed 3 things that can cause the query-editor to load in a collapsed state (height: 0 no gutters, no line numbers, left values that are very large for many child DOM elements). It ends up looking like this:

I’m current at 0.7.3, and doing any of the 3 causes this bug:

• wrapping the GraphiQL component in a div
• loading the css file at the component level (eg using react-helmet)
• upgrading from 0.7.3 to 0.7.8

Has anyone else experienced this? Resizing the window does not help. Additionally calling cm.refresh() doesn’t help either. cm.setSize(null, 100), which sets the height to 100px, doesn’t increase the size of the parent div, so the text sits on top of the variable-editor text. Not sure what else to try. I don’t think this is a code mirror issue because the variable-editor loads perfectly fine. Hopefully whatever result comes out of #152 will also fix this.

[dpikt]

Alternatively, using inline styles:

function Explorer () {
  return (
    <div style={{ height: '100vh' }}>
      <GraphiQL fetcher={ fetcher } />
    </div>
  )
}

[therockstorm]

For others with this issue, setting your styles to that of the example fixes the issue.