Central Panel Scrolling

[hirenshah]

When scrolling down the list of Requests in the sidebar, the main div scrolls as well and so after selecting the desired Request, you have to scroll all the way back up to actually see it.

Sidebar scrolling should be independent of the page scrolling.

[tarampampam]

I'm not a perfect front-end developer (that's why my solution smells a bit), but I hope you will be glad about the result: ghcr.io/tarampampam/webhook-tester:issue-308

[hirenshah]

I'm not a perfect front-end developer (that's why my solution smells a bit), but I hope you will be glad about the result: ghcr.io/tarampampam/webhook-tester:issue-308

I had tried to do it myself and let's just say I'm not even mediocre lol. Going to test this now and will provide an update shortly.

[hirenshah]

Possibly related to this change, when clicking the "Click here":

The Request Details and HTTP Headers shift to the right, and there is horizontal scroll bar. The Show Details and Auto Navigation checkboxes are only visible when you scroll to the right:

For some other "Click here" clicks, the entire top section disappears:

I didn't notice this when I tested the previous change. If required, happy to go back to that version and recheck.

[hirenshah]

Forgot to mention, the sidebar scrolling works well though. It does look a little odd seeing the sidebar just stop when you have scrollable content on the right, but that isn't a big issue. Just the fact that I don't have to endlessly scroll up and down is great 👍

[hirenshah]

Also just noticed that the Request Body panel (normal JSON) is no longer full width:

[hirenshah]

Since I requested these changes, the least I can do is help debug/test. So I reverted back to ghcr.io/tarampampam/webhook-tester:issue-306 and can confirm the following:

1. Pressing "Click here" and having Request Details and HTTP Headers shifting to the right, and Show Details and Auto Navigation checkboxes are only visible when you scroll to the right - this happens in 306

2. Top section disappearing after pressing some of the "Click here" - this doesn't happen in 306

3. Request Body not being full width like it used to be - this doesn't happen in 306

So one minor issue due to 306, and the others are down to the 308 change.

Update:

I was playing around with all this in Chrome Dev Tools and found that changing CSS for .tab-content>.active from display: block; to display: grid; seems to resolve the shifting right and horizontal scroll issue because it contains the tab content. This change also works for both 306 and 308.

Something in 308 has resulted in the content not being full width, but if you add width: 100%; where I've highlighted, it seems to fix the issue:

[hirenshah]

Also found that between screen widths of 690px and 760px the sidebar disappears. Below 690px the sidebar and main panel get stacked so you have to scroll all the way down the list of Requests to see the Request Details.

I doubt I'll ever look at Webhook Tester on my phone, so it isn't an issue for me, but since it has been designed to be responsive, I thought I would let you know. I guess it would be covered off as part of your redesign 🙂

[tarampampam]

Hello! Apologies for the late response, but I have good news - I've added the requested feature, along with a number of other improvements I made while working on version 2 of the app.

It would be great if you could try out the early test build and share your feedback. Do all the features work as expected? Did you encounter any crashes, or notice anything that isn’t functioning as intended?

The Docker image and precompiled binary files are available at this link: https://github.com/tarampampam/webhook-tester/releases/tag/v2.0.0-alpha1