json-edit-react icon indicating copy to clipboard operation
json-edit-react copied to clipboard

Add right margin to confirm buttons

Open Irian opened this issue 1 year ago • 3 comments

Irian avatar Nov 14 '24 14:11 Irian

Hi, this doesn't seem particularly necessary. Do you have a reason why you think it should be in?

Can't you just add the CSS to your own implementation if you want it?

CarlosNZ avatar Nov 21 '24 23:11 CarlosNZ

Dear Carlos,

You're right in that this is not strictly necessary, it is more of a visual issue as the cancel icon and type dropdown are too close together compared to the other icons. Of course I can add this CSS to my implementation, but I thought it would be a nice to have for all.

Kind regards

Irian avatar Nov 22 '24 08:11 Irian

Thanks @Irian. There's actually a little bit of whitespace around the "cancel" icon, which means I'd always thought there was enough padding between it and the selector.

Screenshot 2024-11-23 at 11 12 03 AM

And it means with your suggested additional margin it looks a little too much:

Screenshot 2024-11-23 at 11 11 31 AM

Just eyeballing it, looks like about 0.2 em would even it out. But that would change if you use a different cancel icon too. Just wondering if it looks different for you?

I think I'd rather actually fix the icons so the Confirm and Cancel icons have identical natural padding/scaling and then your adjustment would probably be required! Feel free to do that if you can be bothered ;)

CarlosNZ avatar Nov 22 '24 22:11 CarlosNZ