Server: App icon disappears for overflowing settings page names

[te-online]

Steps to reproduce

1. Create app with a rather long settings page name
2. Apply app-icon to app
3. App icon will not be shown in e.g. /index.php/settings/user

Expected behaviour

Settings page name gets shortened, but app icon stays visible.

Actual behaviour

Settings page name is shortened and app icon disappears.

Nextcloud version

13.0.0RC1

This is an issue that probably needs refactoring of the HTML structure.

We have this

<a href="/nextcloud/index.php/settings/admin/my_app">
  <img alt="" src="/nextcloud/apps/my_app/img/app-dark.svg">
  <span>A very long app settings page name that is too long</span>
</a>

And because the a-tag gets a padding at the position where the img is placed, it will be hidden, once the span-text overflows, because of overflow: hidden. At this moment I have no simple idea how to solve this, maybe someone else has.

[rullzer]

@nextcloud/designers you're up!

[pixelipo]

Solution to this is not a papercut - sidebar in the Settings needs to be rewritten to the new standard, like Files app.

That means migrating icons in settings/templates/settings/frame.php from <img> to CSS

CC @skjnldsv

[skjnldsv]

Yuuup :)
You can find all the docs incredibly written (by me of course 😆) here: https://docs.nextcloud.com/server/12/developer_manual/design/navigation.html

[juliushaertl]

What would be the issue to still allow <img> tags in the app navigation? Since in the settings the icons are coming from different apps, they are not available in any CSS classes in some cases. So that would be another hurdle to solve.

[te-online]

Well, you could inline autogenerated CSS for each app, but that's ugly. Personally, I'm also an advocate of using img-tags, since it makes for better semantics (and there is no advantage anymore like background position, because you can all do it with img too now). But I couldn't find a simple CSS solution in like 20 minutes for this overflowing problem, so not an easy one, I would say 😃 (or I was just stupid in my attempts to solve it...)

[pixelipo]

I'll push a quick-fix in a couple of minutes, but I don't think it's a good long-term solution

[nickvergessen]

The problem with CSS instead of IMG is, that all apps have to load a css file into the global space then to load their image....

[jancborchardt]

So of course this needs to be fixed, but from a design-guideline view – @te-online I recommend in keeping that text short. :) Especially translations will cause issues otherwise, and a label like that should always be short and succinct.

[te-online]

I fully agree! It is indeed the German translation that overflows, the English app name is short and concise 😃 (for the sake of this example I choose an English phrase). I also don't see this issue as urgent, but should be fixed at some point. I'll review the existing fix tomorrow.

[jancborchardt]

Closing cause it’s not reproducible anymore. Yay us! :tada:

Ref https://github.com/nextcloud/server/pull/7951