Editor UI improvement - Border on inline links

[thiago]

The inline links that can be inserted in a text field have a UI that makes it hard to identify blank spaces:

The links do get a border around them when hovering, but still, it’s very easy to miss where it starts or ends.

I’ve solved it for myself by using the Stylebot chrome extension, adding the following style:

.SlateInput__leaf-inline-item  {
 background-color:#f9f9f9;
 outline: .5px solid #eee;
}

Which results in:

But it would be great for non-developers of my team to have it without doing this.

[roger]

Hi @thiago,

One of our devs had a chance to look into this, and just so you know, those backgrounds are missing because you set your project theme’s “Light Color” to pure white (#FFFFFF), which makes those highlights (and other UI elements) invisible against the standard white background.

Our dev will look into whether there’s any easy CSS fix they can apply to this, but in the meantime, a simple workaround would be to just set your defined Light Color to something slightly off-white (i.e. light gray, or very light blue if you want to maintain the same hues).

Just letting you know. Thanks again for the report!