apply new design changes

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

@@ -68,7 +68,7 @@
   /* Layout */
   --sidebar-width: 60px;
   --toolbar-width: 40px;
-  --session-header-height: 51px;
+  --session-header-height: 38.5px;
 }
 
 @media (prefers-color-scheme: dark) {

packages/graphiql-react/src/ui/tabs.css

@@ -1,40 +1,36 @@
 .graphiql-tabs {
+  --bg: hsl(var(--color-base));
+
   display: flex;
   align-items: center;
   gap: var(--px-8);
-  padding: var(--px-8) 0;
-  margin: 0 var(--px-8)
-    /* when using padding while scrolling, tab items will overflow to padding area */;
-  overflow-x: auto;
+  /* reset browser defaults */
+  padding:0;
+  margin: 0;
   list-style: none;
 }
 
-.graphiql-tab,
-.graphiql-tab-wrapper {
-  border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
+/* trick to shrink multiple tabs, instead of overflow container */
+.graphiql-tabs, .graphiql-tab {
+  min-width: 0;
 }
 
 .graphiql-tab {
+  border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
   background: hsla(var(--color-neutral), var(--alpha-background-light));
+  position: relative;
+  display: flex;
+  max-width: 140px;
 
   /* disable shrinking while changing the operation name */
   &:not(:focus-within) {
     transform: none !important;
   }
 
-  .graphiql-tab-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    max-width: 140px;
-    color: hsla(var(--color-neutral), var(--alpha-secondary));
-    backdrop-filter: blur(9999px);
-  }
-
   &:hover,
   &:focus-within,
   &.graphiql-tab-active {
-    background: hsla(var(--color-neutral), 0.2);
+    background: var(--bg);
     color: hsl(var(--color-neutral));
 
     .graphiql-tab-close {
@@ -46,7 +42,7 @@
     border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: var(--px-4) 28px var(--px-4) var(--px-8);
+    padding: var(--px-4) var(--px-8);
 
     &:hover {
       background: none;
@@ -55,8 +51,12 @@
 
   .graphiql-tab-close {
     position: absolute;
-    right: var(--px-4);
+    right: min(var(--px-4), 5%);
+    top: 50%;
+    transform: translateY(-50%);
     display: none;
+    background: var(--bg);
+    box-shadow: -10px 0 10px 0 var(--bg);
     padding: var(--px-6);
     line-height: 0;
 
@@ -66,8 +66,18 @@
     }
 
     &:hover {
-      background: hsla(var(--color-neutral), 0.3);
+      background: var(--bg);
       color: hsl(var(--color-neutral));
+      overflow: hidden; /* bg in `:before` will not overflow from radius area */
+
+      /* trick to add 2nd bg with opacity */
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        background:  hsla(var(--color-neutral), 0.3);
+      }
     }
   }
 }

packages/graphiql-react/src/ui/tabs.tsx

@@ -3,7 +3,6 @@ import { clsx } from 'clsx';
 import { Reorder } from 'framer-motion';
 import { CloseIcon } from '../icons';
 import { UnStyledButton } from './button';
-import { Tooltip } from './tooltip';
 
 import './tabs.css';
 
@@ -28,7 +27,7 @@ const TabRoot = forwardRef<HTMLLIElement, TabProps>(
         className,
       )}
     >
-      <div className="graphiql-tab-wrapper">{children}</div>
+      {children}
     </Reorder.Item>
   ),
 );
@@ -51,17 +50,15 @@ TabButton.displayName = 'Tab.Button';
 
 const TabClose = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
   (props, ref) => (
-    <Tooltip label="Close Tab">
-      <UnStyledButton
-        aria-label="Close Tab"
-        {...props}
-        ref={ref}
-        type="button"
-        className={clsx('graphiql-tab-close', props.className)}
-      >
-        <CloseIcon />
-      </UnStyledButton>
-    </Tooltip>
+    <UnStyledButton
+      aria-label="Close Tab"
+      {...props}
+      ref={ref}
+      type="button"
+      className={clsx('graphiql-tab-close', props.className)}
+    >
+      <CloseIcon />
+    </UnStyledButton>
   ),
 );
 TabClose.displayName = 'Tab.Close';

packages/graphiql/src/components/GraphiQL.tsx

@@ -553,39 +553,40 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                       aria-label="Select active operation"
                     >
                       {editorContext.tabs.map((tab, index) => (
-                        <Tab
-                          key={tab.id}
-                          value={tab}
-                          isActive={index === editorContext.activeTabIndex}
-                        >
-                          <Tab.Button
-                            aria-controls="graphiql-session"
-                            id={`graphiql-session-tab-${index}`}
-                            onClick={() => {
-                              executionContext.stop();
-                              editorContext.changeTab(index);
-                            }}
+                        <Tooltip key={tab.id} label={tab.title}>
+                          <Tab
+                            value={tab}
+                            isActive={index === editorContext.activeTabIndex}
                           >
-                            {tab.title}
-                          </Tab.Button>
-                          <Tab.Close
-                            onClick={() => {
-                              if (editorContext.activeTabIndex === index) {
+                            <Tab.Button
+                              aria-controls="graphiql-session"
+                              id={`graphiql-session-tab-${index}`}
+                              onClick={() => {
                                 executionContext.stop();
-                              }
-                              editorContext.closeTab(index);
-                            }}
-                          />
-                        </Tab>
+                                editorContext.changeTab(index);
+                              }}
+                            >
+                              {tab.title}
+                            </Tab.Button>
+                            <Tab.Close
+                              onClick={() => {
+                                if (editorContext.activeTabIndex === index) {
+                                  executionContext.stop();
+                                }
+                                editorContext.closeTab(index);
+                              }}
+                            />
+                          </Tab>
+                        </Tooltip>
                       ))}
                     </Tabs>
                   )}
-                  <Tooltip label="Add tab">
+                  <Tooltip label="New tab">
                     <UnStyledButton
                       type="button"
                       className="graphiql-tab-add"
                       onClick={handleAddTab}
-                      aria-label="Add tab"
+                      aria-label="New tab"
                     >
                       <PlusIcon aria-hidden="true" />
                     </UnStyledButton>

packages/graphiql/src/style.css

@@ -72,6 +72,8 @@
   display: flex;
   justify-content: flex-end;
   height: var(--session-header-height);
+  padding: var(--px-8) var(--px-8) 0;
+  gap: var(--px-8);
 
   .graphiql-tabs + .graphiql-tab-add {
     margin-right: auto;
@@ -94,13 +96,15 @@ button.graphiql-tab-add {
   color: hsla(var(--color-neutral), var(--alpha-secondary));
   font-size: var(--font-size-h4);
   font-weight: var(--font-weight-medium);
-  padding: var(--px-12) var(--px-16);
 }
 
 /* Undo default link styling for the default GraphiQL logo link */
 .graphiql-container .graphiql-logo .graphiql-logo-link {
   color: hsla(var(--color-neutral), var(--alpha-secondary));
   text-decoration: none;
+  &:focus {
+    outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
+  }
 }
 
 /* The editor of the session */