From 9b4fb2d553dc4a4c4f82a68ea0cad455559c3544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Mon, 13 Mar 2023 10:36:04 +0100
Subject: [PATCH] Fix scrolling issues on Firefox (#3332)

---
 src/components/GraphiQL/GraphiQL.tsx | 2 +-
 src/components/GraphiQL/styles.ts    | 3 +++
 src/index.css                        | 4 ++++
 3 files changed, 8 insertions(+), 1 deletion(-)

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;