Improve GraphQL reference docs page

[m-allanson]

On https://www.gatsbyjs.org/docs/graphql-reference/ the GraphiQL instances are a bit cramped for space, there are a couple of things that could be done to give them more room:

• Increase their width beyond the default content width (mockup)
• Add a 'pop-out' link below each one (ref)

Would it be possible to create a remark plugin that auto-generates pop-out links for iframes?

Refs: #4143 (comment)

[KyleAMathews]

100% possible for the iframe plugin. It'd just iterate through iframes and you could extend any that are graphiql links. @bvaughn's plugin does something very similar https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-code-repls