GraphiQL styles (#3549)

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}>

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" },
 );