fix tabbar overflow (#2919)

graphql · Nov 25, 2022 · f6cae4e · f6cae4e
1 parent 645a2c3
commit f6cae4e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/hip-maps-tickle.md b/.changeset/hip-maps-tickle.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Fix overflow when there are lots of tabs that don't fit into the tab bar at once
diff --git a/packages/graphiql-react/src/ui/tabs.css b/packages/graphiql-react/src/ui/tabs.css
@@ -1,6 +1,6 @@
 .graphiql-tabs {
   display: flex;
-  overflow-y: auto;
+  overflow-x: auto;
   padding: var(--px-12);
 
   & > :not(:first-child) {

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -408,7 +408,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
             <div className="graphiql-horizontal-drag-bar" />
           ) : null}
         </div>
-        <div ref={pluginResize.secondRef}>
+        <div ref={pluginResize.secondRef} style={{ minWidth: 0 }}>
           <div className="graphiql-sessions">
             <div className="graphiql-session-header">
               <Tabs aria-label="Select active operation">

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -47,6 +47,7 @@
 .graphiql-container .graphiql-main {
   display: flex;
   flex: 1;
+  min-width: 0;
 }
 
 /* The current session and tabs */
@@ -60,6 +61,7 @@
   max-height: 100%;
   margin: var(--px-16);
   margin-left: 0;
+  min-width: 0;
 }
 
 /* The session header containing tabs and the logo */