[bug] [UI]: in collection UI, there is issue of spacing and margin

[shreya-gr]

Describe the bug In API collection UI there is issue of margin and spacing, due to that UI get disturbed.

To Reproduce Steps to reproduce the behavior:

1. Go to API collection.
2. You can save few request shows like in the attached screensort, to get the idea about where is the problem.

Expected behavior There should not be margin and spacing issue.

Screenshots

[yatharth1706]

Hi @shreya-gr, Would love to work on this issue.

[shishiro26]

I would like to work on this issue

[0xatulpatil]

Hey @shreya-gr,

I tried to replicate the issue mentioned above and indeed there's some UI spacing/margin issue with the tree-component.

Could you please elaborate on what you exactly mean by fixing the "margin/spacing" issue here?

To fix the issue, two solutions come to my mind

1. Consisten margin to request-tokens

To add a consistent margin across the tokens ( GET, POST, DELETE) which will eliminate the text overlap issue attached in the image above. The updated UI would look something like this.

2. Align request-token text to the right of the div.

To ensure that all the request names line up properly, we could align the request tokens (GET, POST, DELETE) to the right of each div, thus nicely lining up the request names. The updated UI with this change would look something like this.

I would like to work on this issue. If you have any suggestions or any alternate solution please let me know.

[ayushsgithub]

For sure there is issue with the content in UI @shreya-gr

[shreya-gr]

@0xatulpatil Thanks for your suggestion and ideas.

I've 2 suggestion.

1. 2nd option looks good to me.
2. How would it look a like if we save graphql and websocket request along with rest.

[0xatulpatil]

@shreya-gr Not 100% accurate, but this is what it will look like if we go with the 2nd solution

The only problem being, that we'll have to leave a bit of spacing (this spacing will be the largest request token we have, and this to me looks like the DELETE token) to the left for all the icons.

[Nishchit14]

@0xatulpatil looks good, you can share the PR. currently we can consider the DELETE as the longest prefix.

[0xatulpatil]

hey @Nishchit14, made PR for the same.

Turns out the OPTIONS token is the longest prefix amongst all. Went with OPTIONS and not DELETE.

[Nishchit14]

that's great @0xatulpatil i am commenting on the PR now. #101

one thought, i think it's fine to go with DELETE length because the real use of OPTIONS is very rare. the most used methods are get/post/put/delete.