[v4] rollback position: absolute style for .graphiql-logo because…

… tabs will behind logo (#3730)
graphql · Aug 15, 2024 · 360a038 · 360a038
1 parent 167629f
commit 360a038
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/serious-forks-sip.md b/.changeset/serious-forks-sip.md
@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+rollback `position: absolute` style for `.graphiql-logo` because tabs will behind logo
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
@@ -68,6 +68,7 @@
   /* Layout */
   --sidebar-width: 60px;
   --toolbar-width: 40px;
+  --session-header-height: 38.5px;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -64,7 +64,7 @@
 
 /* The session header containing tabs and the logo */
 .graphiql-container .graphiql-session-header {
-  position: relative;
+  height: var(--session-header-height);
   align-items: center;
   display: flex;
   padding: var(--px-8) var(--px-8) 0;
@@ -85,8 +85,7 @@ button.graphiql-tab-add {
 
 /* The GraphiQL logo */
 .graphiql-container .graphiql-logo {
-  position: absolute;
-  right: var(--px-16);
+  margin-left: auto;
   color: hsla(var(--color-neutral), var(--alpha-secondary));
   font-size: var(--font-size-h4);
   font-weight: var(--font-weight-medium);