diff --git a/views/api/graphiql.ejs b/views/api/graphiql.ejs
index b6d609de6..8007569b3 100644
--- a/views/api/graphiql.ejs
+++ b/views/api/graphiql.ejs
@@ -5,13 +5,17 @@
   <meta charset="utf-8" />
   <title>GraphiQL</title>
   <meta name="robots" content="noindex" />
+  <%- include ../partials/dev %>
   <style>
-    html, body {
+    html, body, #graphiql {
       height: 100%;
       margin: 0;
       overflow: hidden;
       width: 100%;
     }
+    *, ::after, ::before {
+      box-sizing: inherit;
+    }
   </style>
   <link href="//cdn.jsdelivr.net/graphiql/0.9.1/graphiql.css" rel="stylesheet" />
   <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
@@ -20,6 +24,8 @@
   <script src="//cdn.jsdelivr.net/graphiql/0.9.1/graphiql.min.js"></script>
 </head>
 <body>
+  <%- include ../partials/dev-nav %>
+  <main id="graphiql"></main>
   <script>
     // Collect the URL parameters
     var parameters = {};
@@ -112,8 +118,8 @@
         variables: null,
         operationName: null,
       }),
-      document.body
+      document.querySelector("#graphiql")
     );
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
