Fix scrolling issues on Firefox (#3332)

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={{

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

src/index.css

@@ -17,6 +17,10 @@ body {
   display: none;
 }
 
+.hide-scrollbar {
+  scrollbar-width: none;
+}
+
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;