From 5ae7f1fa6c371c84294c9d7a9747e64516e15ebf Mon Sep 17 00:00:00 2001
From: Mandi Wise <hello@mandiwise.com>
Date: Wed, 16 Oct 2024 16:31:48 -0600
Subject: [PATCH 1/3] Label mini GraphiQL panels.

---
 src/codemirror.less                     | 38 ++++++++++++++++---------
 src/components/marked/mini-graphiQL.tsx | 18 ++++++++++--
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/codemirror.less b/src/codemirror.less
index a1fc5fc0c2..f1cdee39d9 100644
--- a/src/codemirror.less
+++ b/src/codemirror.less
@@ -816,6 +816,24 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     inset 4px 0 0 #eee;
   border-radius: 3px;
   margin-left: -4px;
+
+  .editor-name {
+    position: sticky;
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid rgb(209, 213, 219);
+    background-color: rgb(243, 244, 246);
+    color: rgb(55, 65, 81);
+    font-size: 0.8rem;
+    font-weight: 600;
+
+    .dark & {
+      border-bottom-color: rgb(23, 23, 23);
+      background-color: rgb(8, 8, 8);
+      color: rgb(209, 213, 219);
+      font-weight: 400;
+    }
+  }
 }
 
 .query-editor .CodeMirror {
@@ -846,19 +864,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     margin: 0 7px;
     background: none;
   }
-
-  .variable-editor::before {
-    background: #eee;
-    color: white;
-    content: "VARIABLES";
-    display: block;
-    font-size: 10px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    line-height: 1;
-    padding: 3px 12px 2px;
-    text-shadow: 0 -1px #ddd;
-  }
 }
 
 .result-window {
@@ -879,6 +884,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .result-window .CodeMirror {
   background: none;
   height: 100%;
+  padding-bottom: 45px;
   margin: 0 7px;
   box-sizing: border-box;
 }
+
+.query-editor,
+.variable-editor,
+.result-window {
+  overflow: hidden;
+}
diff --git a/src/components/marked/mini-graphiQL.tsx b/src/components/marked/mini-graphiQL.tsx
index b97aa859b9..b847ad80f2 100644
--- a/src/components/marked/mini-graphiQL.tsx
+++ b/src/components/marked/mini-graphiQL.tsx
@@ -256,7 +256,11 @@ class QueryEditor extends Component {
   }
 
   render() {
-    return <div className="query-editor" ref={e => (this.domNode = e)} />
+    return (
+      <div className="query-editor" ref={e => (this.domNode = e)}>
+        <span className="editor-name">Operation</span>
+      </div>
+    )
   }
 }
 
@@ -305,7 +309,11 @@ class ResultViewer extends Component {
   }
 
   render() {
-    return <div className="result-window" ref={e => (this.domNode = e)} />
+    return (
+      <div className="result-window" ref={e => (this.domNode = e)}>
+        <span className="editor-name">Response</span>
+      </div>
+    )
   }
 }
 
@@ -424,7 +432,11 @@ class VariableEditor extends Component {
   }
 
   render() {
-    return <div className="variable-editor" ref={e => (this.domNode = e)} />
+    return (
+      <div className="variable-editor" ref={e => (this.domNode = e)}>
+        <span className="editor-name">Variables</span>
+      </div>
+    )
   }
 
   _didLint(annotations) {

From b0c225b666b6b3a38a2f32cc990cdb9a31fdf8ed Mon Sep 17 00:00:00 2001
From: Mandi Wise <hello@mandiwise.com>
Date: Fri, 18 Oct 2024 14:10:34 -0600
Subject: [PATCH 2/3] Round operation panel corners.

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
---
 src/components/marked/mini-graphiQL.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/marked/mini-graphiQL.tsx b/src/components/marked/mini-graphiQL.tsx
index b847ad80f2..9a82642332 100644
--- a/src/components/marked/mini-graphiQL.tsx
+++ b/src/components/marked/mini-graphiQL.tsx
@@ -258,7 +258,7 @@ class QueryEditor extends Component {
   render() {
     return (
       <div className="query-editor" ref={e => (this.domNode = e)}>
-        <span className="editor-name">Operation</span>
+        <span className="editor-name rounded-tl">Operation</span>
       </div>
     )
   }

From dd6f566fde56cab3d5562867ed42facb53d39f72 Mon Sep 17 00:00:00 2001
From: Mandi Wise <hello@mandiwise.com>
Date: Fri, 18 Oct 2024 14:10:56 -0600
Subject: [PATCH 3/3] Round response panel corners.

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
---
 src/components/marked/mini-graphiQL.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/marked/mini-graphiQL.tsx b/src/components/marked/mini-graphiQL.tsx
index 9a82642332..efc36dbcc4 100644
--- a/src/components/marked/mini-graphiQL.tsx
+++ b/src/components/marked/mini-graphiQL.tsx
@@ -311,7 +311,7 @@ class ResultViewer extends Component {
   render() {
     return (
       <div className="result-window" ref={e => (this.domNode = e)}>
-        <span className="editor-name">Response</span>
+        <span className="editor-name rounded-tr">Response</span>
       </div>
     )
   }