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'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.

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.

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 👍

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

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:

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 🙂