hasura / hasura/graphql-engine

Doc Explorer Gets Hidden When Fields Have Long Names, Preventing Horizontal Scrolling

Open
#10,694 2 comments 0 reactions 0 assignees View on GitHub
k/bug
Dominant language
TypeScript
Stars
32.1k
Forks
3k
PR merge metrics
PR metrics pending

Description

### Version Information

Server Version:
CLI Version (for CLI related issue): v2.45.1-cloud.1

### Environment

Cloud

### What is the current behaviour?

When there are fields that are too long, the doc explorer will get hidden and cannot be navigated/scrolled horizontally to the left side of the element.

### What is the expected behaviour?

I should be able to scroll horizontally in the doc explorer or the doc explorer should expand to match with the content inside.

### How to reproduce the issue?

1. Write a query with a table or fields with a really long name (to make the explorer expand).
2. Refresh the Hasura console.

### Screenshots or Screencast

![Image](https://github.com/user-attachments/assets/de0f379f-d505-42fa-9b76-17e87f91687a)

![Image](https://github.com/user-attachments/assets/8cce30b6-5fe4-4635-a698-682070d4096a)

### Please provide any traces or logs that could help here.

--

### Any possible solutions/workarounds you're aware of?

Removing `overflow: hidden;` (or changing it to `overflow: scroll;` ) from `div.docExplorerWrap`'s inline CSS will allow me to see the whole table again.

![Image](https://github.com/user-attachments/assets/3dfdd91e-79a9-4ff9-ac7c-74c4398fb834)

![Image](https://github.com/user-attachments/assets/c3618eda-2451-4170-abe0-6755eaf139bc)

### Keywords

docExplorerWrap, explorer

Contributor guide

Open the contributing guide

Research direction

Search the console code for the docExplorerWrap element and its inline overflow styling, then reproduce the issue with a table or field using a very long name and refresh the Hasura console. Done means the doc explorer remains accessible and can be scrolled horizontally to reveal the full content.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.