search

amir20 / dozzle

Realtime log viewer for docker containers.
https://dozzle.dev/
MIT License
5.7k stars 287 forks source link

Resize handle is very sensitive to position #3130

Closed drmrbrewer closed 1 month ago

drmrbrewer commented 1 month ago

Describe the feature you would like to see

Just a minor UI suggestion... at present when resizing the left/right panels via the drag handle, the handle only seems to appear when you're exactly on the boundary, almost to a pixel level. It would be good if the handle were less sensitive to position, and appeared within some larger margin from the boundary. Compare the behaviour with the drag handles at https://jsfiddle.net/ for example.

amir20 commented 1 month ago

I use a third party plugin. I only have control over the width. Right now it's set to 3px. I have tried larger pixels but it makes it ugly IMO. What did you have in mind to improve it? It's pretty to change it if you know css.

I trued jsfiddle and found it even more confusing but no colors change when hovered.

drmrbrewer commented 1 month ago

I'm not sure what you find confusing about the drag handle on jsfiddle... it seems pretty standard to me... IMHO there doesn't need to be any colour change on hover (you can see the cursor change type very clearly, which is enough as a visual feedback that a resize is possible)... IMHO an immediate flash of yellow is not pretty and a bit "in your face". There is no colour change in jsfiddle, which is fine. With vscode there's a nice middle ground... no immediate change of colour, but only after a short delay. What is more important is that there is a wide enough drag zone so that you don't have to spend a while just to get the cursor to stop inside a narrow zone to make the drag become effective. With dozzle the default zone is so narrow that sometimes (even with a fairly slow mouse move) you can be over the top of it without even registering that a drag is possible.

https://github.com/user-attachments/assets/30ff3576-0bf3-4e7c-bb3d-00e54c5a5ff3

https://github.com/user-attachments/assets/a155fa6f-ca9b-4c45-ab3b-aade3e50d90e

https://github.com/user-attachments/assets/a53b7692-30a0-457d-bc4c-b9a6913849bf

amir20 commented 1 month ago

The videos help. Thanks. But as I said earlier, I use another library. https://antoniandre.github.io/splitpanes/. Default is 7px, I did 4px. I don't have much control over the drag area. I can make the div wider. That's about it. I can't make it delayed or other fancy things.

If you can suggest a fix then let's follow up, but I won't have time to fix it personally. I find that what people want sometimes, might annoy other people. Then I spent a lot of time going between different features. I try avoid customizing Dozzle too much.

Open the PRs on this to make it wider. Just right click on the vertical bar and change the css. At the moment, I am working on performance issues and improving agent mode. This isn't the highest priority for me.

amir20 commented 1 month ago

Don't plan to work on this. So closing.