[graphiql] 5.2.0 Scrolling broken in GraphiQl #4088
Description
Is there an existing issue for this?
- I have searched the existing issues
Current Behavior
When the query box is large enough to overflow, a scrollbar not only appears on the ide text window, but also the outer GraphiQL window itself. This scrollbar shrinks as you scroll down in the text window, disappearing as you reach the end.
If this scrollbar is visible, you can scroll below the bottom of the GraphiQL window. Similarly, opening a plugin from the side panel and scrolling to the bottom of it will scroll below the entire window.
(demo video in reproduction steps if this didn't make sense)
This likely has something to do with the styling introduced in 5.2.0 (this commit).
Would look into the overflow guard and line number margin
Expected Behavior
- No duplicate scroll bar appears.
- Cant scroll below the bottom of the page
Steps To Reproduce
Recording.2025-08-01.121016.mp4
This can be recreated with the following single file TSX app (the Lorem import is simple a long list of random text):
import { createGraphiQLFetcher } from "@graphiql/toolkit";
import { GraphiQL } from "graphiql";
import { createRoot } from "react-dom/client";
import "graphiql/style.css";
import type { GraphiQLPlugin } from "@graphiql/react";
import { Lorem } from "./LoremIpsumText";
const fetcher = createGraphiQLFetcher({
url: "https://spacex-production.up.railway.app/graphql",
});
const ExamplePlugin: GraphiQLPlugin = {
icon: () => "Docs",
title: `docs title`,
content: () => Lorem, // Random text
};
createRoot(document.getElementById("root")!).render(
<GraphiQL fetcher={fetcher} plugins={[ExamplePlugin]} />,
);Mounted onto this index.html:
<!doctype html>
<html lang="en">
<body style="margin: 0;">
<div id="root" style="height: 100vh;"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Environment
- GraphiQL Version: 5.2.0
- OS: windows
- Browser: MS Edge
- Bundler: Vite
reactVersion: 19.1.1graphqlVersion: 16.11.0
Anything else?
No response