fix minor graphiql style issues (#2712)

* make sure hidden editors don't overflow their container
* fix hiding back link and title in docs

.changeset/eight-wombats-refuse.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Make sure the back link and title are hidden when focussing the input field for searching the docs

.changeset/sweet-tomatoes-protect.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Make sure hidden editors don't overflow

packages/graphiql-react/src/editor/style/editor.css

@@ -5,7 +5,9 @@
 
   &.hidden {
     /* Just setting `display: none;` would break the editor gutters */
+    left: -9999px;
     position: absolute;
+    top: -9999px;
     visibility: hidden;
   }
 }

packages/graphiql-react/src/explorer/components/doc-explorer.css

@@ -4,9 +4,20 @@
   justify-content: space-between;
   position: relative;
 
-  &:focus-within .graphiql-doc-explorer-title {
-    /* Hide the header when focussing the search input */
-    visibility: hidden;
+  &:focus-within {
+    & .graphiql-doc-explorer-title {
+      /* Hide the header when focussing the search input */
+      visibility: hidden;
+    }
+
+    & .graphiql-doc-explorer-back:not(:focus) {
+      /**
+        * Make the back link invisible when focussing the search input. Hiding
+        * it in any other way makes it impossible to focus the link by pressing
+        * Shift-Tab while the input is focussed.
+        */
+      color: transparent;
+    }
   }
 }
 .graphiql-doc-explorer-header-content {