Ending bracket horizontally aligned with the key name

[zowebs]

Suggestion
It would be great if the ending bracket of array/object would be horizontally on the same indent as the key. Right now, it is aligned with the chevron in front of the key

Use case
I tried to depict where I would expect the ending bracket to be. There will definitely be more opinions about this, so maybe make it optional prop?

[CarlosNZ]

Hi @zowebs, you should be able to override the CSS to do this as you please. The class you want to target is jer-bracket-outside.

Here's what it looks like after I apply:

.jer-bracket-outside {
  padding-left: 1em;
}

Does that work for you?

As for the suggestion in general, I'll have a look at other similar UI and see if or what the convention is. Thanks for bringing it up :)

[zowebs]

Thank you for provided solution

[CarlosNZ]

All good. But I think you're right though -- now that I look at it, it probably should be aligned with the key. I think I'll probably tweak this in the next update (which means you'll have to undo your CSS fix 😆)

Thanks for bringing it to my attention :)