fix styles of secondary editor buttons (#2911)

graphql · Nov 15, 2022 · 118db40 · 118db40
1 parent 16174a0
commit 118db40
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/chilly-weeks-invent.md b/.changeset/chilly-weeks-invent.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+Fix styles of secondary editor buttons
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -513,7 +513,8 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                         <UnStyledButton
                           type="button"
                           className={
-                            activeSecondaryEditor === 'variables'
+                            activeSecondaryEditor === 'variables' &&
+                            editorToolsResize.hiddenElement !== 'second'
                               ? 'active'
                               : ''
                           }
@@ -530,7 +531,8 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                           <UnStyledButton
                             type="button"
                             className={
-                              activeSecondaryEditor === 'headers'
+                              activeSecondaryEditor === 'headers' &&
+                              editorToolsResize.hiddenElement !== 'second'
                                 ? 'active'
                                 : ''
                             }

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -251,12 +251,11 @@ button.graphiql-tab-add > svg {
   width: 0;
 }
 
-/* Generic icon style */
 .graphiql-container .graphiql-chevron-icon {
   color: hsla(var(--color-neutral), var(--alpha-tertiary));
   display: block;
   height: var(--px-12);
-  padding: var(--px-12);
+  margin: var(--px-12);
   width: var(--px-12);
 }