hasura / hasura/graphql-engine

Console: The styling of the data table view and edit row sections needs an improvement

Open
#8,704 1 comment 0 reactions 0 assignees View on GitHub
c/console estimate/S k/enhancement
Dominant language
TypeScript
Stars
32.1k
Forks
3k
PR merge metrics
PR metrics pending

Description

### Problem Description

The recent commit meddled some of the styling in the table view and edit row sections. So it needs improvement.

1. In the data table view section, If the table is an enum table, the elements displayed should be inline with Run query button and Export data dropdown, but they appear just below the other elements.
2. In the edit row section, the large space between the side bar and the main section does not match other views of the hasura console.
3. There's no space between save button and other elements.

Screenshot for 1 (Table view section)

![data-issue](https://user-images.githubusercontent.com/99816019/179969711-2764123d-e24b-4c0f-bd0d-fb80c6153659.png)

Screenshot for 2 and 3 (Edit row view section)

![edit-issue](https://user-images.githubusercontent.com/99816019/179970244-abd9d11b-0a06-49d8-bd9d-2c525e8b827a.png)

### Describe the solution you'd like

1. Inline the elements in the data table view section.
2. Remove the space between the side bar and the main section and match it with other views of the application.
3. Create space between the button and other elements.

Screenshot of the solution:

![image](https://user-images.githubusercontent.com/99816019/179968958-0595a8b5-d482-4e4b-87bb-1febbb0c2a8f.png)

### Describe alternatives you've considered

### If the feature is approved, would you be willing to submit a PR?

Yes, I'm working on it.

Contributor guide

Open the contributing guide

Research direction

No files or tests are named. Start by locating the Console data table view and edit row sections, then compare their layout with other Console views. Done means enum-table controls are inline, the edit-row spacing matches the other views, and the save button has visible separation from adjacent elements.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.