Better space usage in DebugPanel view

[kromit]

I use a full HD display and under some circumstances I can only see 4-5 last actions happened because of heavy vertical padding/margin usage in the styles. (2-3 visible actions with Chrome dev tools opened)

How about an option to remove all the vertical padding/margin styles at all to maximize the space usage? I mean I like the aesthetics but usability and productivity is more important here.

[gaearon]

Can you make a screenshot so we can get a better idea of your setup?

[kromit]

Current state

Desired state

I mean if it is for debugging so it also could look like debugging :) Also please notice Chrome dev tools font sizes.

[danielkcz]

Well I think that spacing shouldn't be changed as it could introduce accidental clicks on something you didn't wanted. Much better solution could be automatic collapse basically to see just state and action in there by default. Or maybe make that configurable...

[kromit]

Since the panel is designed specially for debugging, there is a really small chance the panel is seen by someone who does not know what he is doing. The probability of accidental click will be much lower in comparison to the currently almost persistent need to scroll up and down. However I also think it should be configurable.

On the configurability: I am not a friend of inline React styles since I do work with less ans sass, so for me the best solution would be the optional disabling of all inline styes and additional usage of CSS classes so everybody can have its own style. Inline styles dictate the view too strictly with no option for any customization.

[gaearon]

Accidental don't happen because somebody doesn't know what they're doing. :-) They happen because we are people, not robots.

[kromit]

Right. I mean it is not that severe since the target user group does know how to handle it :)

[gaearon]

Even with the current version I often misclick because the click area isn't large enough. Knowing what to do isn't enough. :-)

[kromit]

So configurable styles would allow you to make it bigger more easily...? ;D

[gaearon]

I'm closing this issue because it is not directly actionable in this repo anymore, as the log monitor has been separated. The issue now lives as gaearon/redux-devtools-log-monitor#1, and a PR to fix it is welcome.