[BITV] Focused item overlaps neighbor elements with text and border

[JuliaKirschenheuter]

• Keyboard focus overlaps with text

@jancborchardt you mean

?

Then i guess we need another design

[JuliaKirschenheuter]

Answer from @jancborchardt:

@JuliaKirschenheuter Only using border-bottom instead of all around seems fine in this case then?

[JuliaKirschenheuter]

I've spent some time with experimenting around another focus state (also with using border-bottom instead of whole border).

My conclusion:

1. Other border type or whatever would not solve initial problem because focus overlaps neighbor elements via zooming. In this case we have to re-think design behavior. Even without any border:
   

2. If i place a border-bottom under a text, there are much other places to fix and this is still not a solution for this issue and isn't beautiful too. Places to fix: zooming via focus, text position, probably icon position.
   

3. If i place a border-bottom under a link element than this is still not a solution for this issue and isn't beautiful too.
   

@jancborchardt i have no quick-fix for now. Could you please discuss with other designers about possible solution? I guess we have to change design / behavior.

[JuliaKirschenheuter]

@PVince81, @Pytal what are you thinking about it?

[jancborchardt]

I also played around with it a bit and we did some tries at improving it in the past, including with background-color (which never looks good).

I think by now the easiest and non overlapping would be if we

• Simply do not expand the text anymore and just use title? The full text is in the element so it is accessible like that.
• We put in the guidelines that app names should be short. Apple does it similarly, cause there is just a limit to it
• We could (via JS) reduce the tracking of the font if the text is too long to save some space. This is also what apple does
• We could also increase the width of the elements a little bit

As for the focus highlight, instead of border-bottom we could use ::before, like we do for the currently active app. That also looks nicer since it does not move the rest of the content and we can give it rounded corners:

What do you think @JuliaKirschenheuter?

[jancborchardt]

Ah and just to be clear - if it is only about the focus border overlapping the text, then it is rather easy, literally just using the ::before style instead of the border around it.

[JuliaKirschenheuter]

Thanks for your ideas @jancborchardt! Some of your point are't clear to me, could you please extend your ideas a bit?

Simply do not expand the text anymore and just use title? The full text is in the element so it is accessible like that.

What do you mean exactly? You mean take away the names of the app like "Files", "Photos", "Contacts" and so on?

We put in the guidelines that app names should be short.

Please give me an example how should i look like.

We could (via JS) reduce the tracking of the font if the text is too long to save some space.

What do you mean with "reduce the tracking of the font"? It is cut per default and the whole name will be shown per focus.

We could also increase the width of the elements a little bit.

We cant't control the width of all languages. In actual design we have strong fixed width, of coarse we can expand it but we still can't control everything.

As for the focus highlight, instead of border-bottom we could use ::before, like we do for the currently active app.

Well, sure.

⚠️ But the main thing is: how should we handle overlapped text, because this is the most important thing.

[jancborchardt]

Let me try to reformulate:

• I indeed mean to increase the fixed width of one navigation element. Just by maybe 4-8px.
• The tracking is the letter spacing. We could use letter-spacing: -1px; to save some extra space if it looks ok: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
• And lastly on hover and focus, let's not expand the text anymore outside of the width of the element. Cause if the overlap is the issue, let's make it not overlap. ;) And instead we use title for hover.
• Regarding guidelines, we actually already have a section in the design guidelines: https://docs.nextcloud.com/server/stable/developer_manual/design/foundations.html#naming

[…] we choose app names which are […] short and easily fit in the top navigation without being cut off.