[graphiql] Run dropdown list

[jetsstarplus]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

With multiple queries and mutations on the web editor, when I hit the run button a list of the commands are shown and if they exceed a certain number, some of them are hidden from the dropdown list.
Its only until I zoom in the UI for me to see the remaining commands.
The Z-Index of the dropdown is also overridden by those of the editors left pane overflow bars.

Expected Behavior

The dropdown, should have a maximum height that should have a scroll behavior incase the items in it exceed it's height.
The z-index of the dropdown should also be higher than those of the editor pane scrollbars.

Steps To Reproduce

1. Use the CDN provided for both the minified css and js for the HTML File.

Module pattern

• graphiql-umd
• graphiql-esm
• graphiql-commonjs

Environment

- GraphiQL Version:latest
- OS:Windows 10
- Browser: Chrome 106
- Bundler:
- `react` Version:18
- `graphql` Version:16

Anything else?

No response

[dimaMachina]

could you attach screenshot or video?

[jetsstarplus]

Ofcourse, Here is normal view.
As you can see, the scroll bars are on top of the dropdown

The dropdown also does not show all commands, here is the view with 33% zoom

[acao]

I remember this bug in 0.x. We set the max height dynamically using vh if i recall, but that caused issues on resize of course, so we set a fixed pixel height

[dimaMachina]

i think it's should be fixed with #3183 will try it once it will be merged!

[jetsstarplus]

Thats Ok

[dimaMachina]

@jetsstarplus you can try a fix in graphiql@3.0.0-alpha.0

[jetsstarplus]

@jetsstarplus you can try a fix in graphiql@3.0.0-alpha.0

Yes It is Ok now, It has a scroll behavior.
Though the scrollbar is still on top of the dropdown as in the picture below.
I'm using the latest chrome browser on windows

[dimaMachina]

@jetsstarplus you can send a PR if you found a way how to fix it, I don't use windows

[jetsstarplus]

Ok

…

On Fri, 2 Jun 2023, 22:50 Dimitri POSTOLOV, ***@***.***> wrote: @jetsstarplus <https://github.com/jetsstarplus> you can send a PR if you found a way how to fix it, I don't use windows — Reply to this email directly, view it on GitHub <#3187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMSYB5UL3RP6D5PUTHREMTDXJI7YXANCNFSM6AAAAAAYLRXICE> . You are receiving this because you were mentioned.Message ID: ***@***.***>