From d65f00ea2d158cf532d1c71844630c5d9ec13410 Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Sat, 27 Aug 2022 10:07:02 +0200
Subject: [PATCH] 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              |  5 +++++
 .changeset/sweet-tomatoes-protect.md            |  5 +++++
 .../graphiql-react/src/editor/style/editor.css  |  2 ++
 .../src/explorer/components/doc-explorer.css    | 17 ++++++++++++++---
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/eight-wombats-refuse.md
 create mode 100644 .changeset/sweet-tomatoes-protect.md

diff --git a/.changeset/eight-wombats-refuse.md b/.changeset/eight-wombats-refuse.md
new file mode 100644
index 00000000000..737aeac8a46
--- /dev/null
+++ b/.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
diff --git a/.changeset/sweet-tomatoes-protect.md b/.changeset/sweet-tomatoes-protect.md
new file mode 100644
index 00000000000..b649619573d
--- /dev/null
+++ b/.changeset/sweet-tomatoes-protect.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Make sure hidden editors don't overflow
diff --git a/packages/graphiql-react/src/editor/style/editor.css b/packages/graphiql-react/src/editor/style/editor.css
index c717d555971..c9d0767d20c 100644
--- a/packages/graphiql-react/src/editor/style/editor.css
+++ b/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;
   }
 }
diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css
index bc652826f08..8b7a3ab767f 100644
--- a/packages/graphiql-react/src/explorer/components/doc-explorer.css
+++ b/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 {