From 65a329ebe4b89bdf1a485a73e1cc54418976ac69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Wiaduch?= <2can@users.noreply.github.com>
Date: Thu, 4 May 2023 17:09:10 +0200
Subject: [PATCH] GraphiQL styles (#3549)

---
 src/components/GraphiQL/GraphiQL.tsx |  9 ++++++---
 src/components/GraphiQL/styles.ts    | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/GraphiQL/GraphiQL.tsx b/src/components/GraphiQL/GraphiQL.tsx
index ab40ed4e2..9b88255c5 100644
--- a/src/components/GraphiQL/GraphiQL.tsx
+++ b/src/components/GraphiQL/GraphiQL.tsx
@@ -220,7 +220,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   return (
     <div
       data-test-id="graphiql-container"
-      className="graphiql-container"
+      className={clsx("graphiql-container", classes.graphiqlContainer)}
       style={rootStyle}
     >
       <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
@@ -273,7 +273,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
           ) : null}
         </div>
         <div ref={pluginResize.secondRef} style={{ minWidth: 0 }}>
-          <div className="graphiql-sessions">
+          <div className={clsx("graphiql-sessions", classes.graphiqlSessions)}>
             <div
               role="tabpanel"
               id="graphiql-session"
@@ -283,7 +283,10 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
             >
               <div ref={editorResize.firstRef}>
                 <div
-                  className="graphiql-editors full-height"
+                  className={clsx(
+                    "graphiql-editors full-height",
+                    classes.graphiqlEditors,
+                  )}
                   style={{ boxShadow: "none" }}
                 >
                   <div ref={editorToolsResize.firstRef}>
diff --git a/src/components/GraphiQL/styles.ts b/src/components/GraphiQL/styles.ts
index c2e8cacc8..9ddc35480 100644
--- a/src/components/GraphiQL/styles.ts
+++ b/src/components/GraphiQL/styles.ts
@@ -11,6 +11,10 @@ export const useStyles = makeStyles(
   () => ({
     pre: {
       whiteSpace: "break-spaces",
+      maxHeight: 450,
+      overflowY: "scroll",
+      marginBottom: 0,
+      marginTop: -26,
     },
     main: {
       position: "relative",
@@ -22,6 +26,18 @@ export const useStyles = makeStyles(
         overflowY: "scroll !important",
       },
     },
+    graphiqlSessions: {
+      margin: "0 !important",
+      marginRight: "var(--px-16) !important",
+      paddingTop: "var(--px-16)",
+      borderRadius: "0 !important",
+    },
+    graphiqlEditors: {
+      borderRadius: "0 !important",
+    },
+    graphiqlContainer: {
+      fontVariantLigatures: "none",
+    },
   }),
   { name: "GraphiQL" },
 );