diff --git a/src/components/GraphiQL/GraphiQL.tsx b/src/components/GraphiQL/GraphiQL.tsx
index c2e4e1773..70486f49a 100644
--- a/src/components/GraphiQL/GraphiQL.tsx
+++ b/src/components/GraphiQL/GraphiQL.tsx
@@ -241,7 +241,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
         </div>
         <div className="graphiql-sidebar-section"></div>
       </div>
-      <div className="graphiql-main">
+      <div className={clsx("graphiql-main", classes.main)}>
         <div
           ref={pluginResize.firstRef}
           style={{
diff --git a/src/components/GraphiQL/styles.ts b/src/components/GraphiQL/styles.ts
index aff649541..755c36a75 100644
--- a/src/components/GraphiQL/styles.ts
+++ b/src/components/GraphiQL/styles.ts
@@ -11,6 +11,9 @@ export const useStyles = makeStyles(
     pre: {
       whiteSpace: "break-spaces",
     },
+    main: {
+      position: "relative",
+    },
     scrollable: {
       // Overrides inline styling which breaks scroll
       // on doc explorer plugin
diff --git a/src/index.css b/src/index.css
index 9a0174a4a..cd942f6e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,6 +17,10 @@ body {
   display: none;
 }
 
+.hide-scrollbar {
+  scrollbar-width: none;
+}
+
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;