[PR #2142] [CLOSED] fix: graphql response vertical alignment #3645

New issue

Closed

opened 2026-03-17 01:14:24 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:14:24 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2142
Author: @ysdexlic
Created: 3/1/2022
Status: ❌ Closed

Base: main ← Head: bug/graphql-response-alignment

📝 Commits (1)

01b6e6e fix: graphql response vertical alignment

📊 Changes

1 file changed (+1 additions, -1 deletions)

View changed files

📝 packages/hoppscotch-app/components/graphql/Response.vue (+1 -1)

📄 Description

Description

Currently the GraphQL response pane is broken for large responses. As the content is aligned to the center you can't scroll up to see the beginning of the response, setting this alignment to flex-start allows us to see all the content.
There was also some padding around the response section which made it look different to the REST response pane and also made the response banner appear over the response text, I've removed this padding to make it look the same as the REST response section.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

Screenshots for reference:

Before

After

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2142 **Author:** [@ysdexlic](https://github.com/ysdexlic) **Created:** 3/1/2022 **Status:** ❌ Closed **Base:** `main` ← **Head:** `bug/graphql-response-alignment` --- ### 📝 Commits (1) - [`01b6e6e`](https://github.com/hoppscotch/hoppscotch/commit/01b6e6e524641022b4d5746e2f628594b710c96f) fix: graphql response vertical alignment ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-app/components/graphql/Response.vue` (+1 -1) </details> ### 📄 Description   ### Description  Currently the GraphQL response pane is broken for large responses. As the content is aligned to the center you can't scroll up to see the beginning of the response, setting this alignment to `flex-start` allows us to see all the content. There was also some padding around the response section which made it look different to the REST response pane and also made the response banner appear over the response text, I've removed this padding to make it look the same as the REST response section.  ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Additional Information  Screenshots for reference: #### Before ![Screenshot 2022-03-01 at 09 13 50](https://user-images.githubusercontent.com/16815919/156142121-47724c68-fefa-41a6-bb76-9cf58490f42f.png) #### After ![Screenshot 2022-03-01 at 09 22 15](https://user-images.githubusercontent.com/16815919/156142149-18043dce-e5a2-407b-9eec-19436aee8a06.png) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>