[graphiql] Regression: Tabs no longer scrollable on v4

[AndKiel]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

In v4, when you add new tabs, their titles get truncated further and further.

Expected Behavior

In v3, adding many tabs resulted in horizontal scroll being available. I'd expected that behavior to be unchanged as it seemed more useful to me to have a scroll and visible titles.

Steps To Reproduce

Keep clicking "+" button to add new tabs and observe different behavior between v3 and v4.

Environment

• GraphiQL Version: latest (4.0.2)
• OS: macOS Sequoia 15.4.1
• Browser: Firefox 138.0.1
• Bundler: vite 6.3.5
• react Version: 19.1.0
• graphql Version: 16.11.0

Anything else?

No response

[dimaMachina]

This change was explicit in v4 to mimic Google Chrome tabs

[AndKiel]

I'd rather mimic Firefox, which shrinks each tab width until a predefined minimum width is reached, then a scroll becomes available. Much more useful and easier to interact with.

EDIT: GraphiQL explorer is not a web browser - tabs here do not have favicons to allow users easily distinguish between content. The change made user experience much worse than it was before.

[Nikamura]

this is how it looks for me when i have many tabs with long query names

[mfn]

I also miss the scrolling of tabs (using Firefox)

This is how it looked after upgrading:

Yes, I've a lot of tabs, but I've predefined queries I can easily jump to, super useful before. Now… err, kind of useless 😅 Can't read them anymore :/

[dimaMachina]

Thanks for the feedback! The new UI was inspired by Apollo Studio's tabs, but it looks like they've recently updated theirs as well and added scrolling to the tab area.

So scroll in tabs will be back in upcoming patch releases in GraphiQL 👍