fix(AppMenu): Prevent menu entries from jumping on hover

[susnux]

• Resolves [Bug]: Content shift when mouse is over top menu elements #47148

[Pytal]

Tested and the icons don't move anymore but the text gets offset away from the hovered app which looks a bit strange 🤔

[jancborchardt]

Same as @Pytal noted – we could make the hovered/active app wider (like now) just without shifting the labels left and right if it, if possible? So that they keep centered below their icon.

[susnux]

@jancborchardt if we make the hovered wider, without shifting, then everything will move. If you hover the middle entry of 3 app, then the right one will move to the right because the hovered grows.
That why I instead just shrink the text of the neighbors to allow the hovered one to grow without any movement of the app entries.

So the problem here is, that the current version (not this PR) is shrinking & expanding items, but to prevent visual jumping the app icon is always kept on the same place (so it is not centered anymore but at least you do not see that jumping). Due to the animation the sizes are animated and when you move your mouse two items are animated in different states -> causing the problem that this PR should solve.

This PR is not growing the item anymore, but instead just expand the label -> no weird hover states anymore so no jumping. But if the app text is small this causes this issue, so I could adjust it to only shrink / grow if needed (so the hovered text is ellipsed), but this is then not CSS only anymore and needs some JS.

[jancborchardt]

@susnux so by making it wider I also only mean the text label, not the whole entry (so there is no jumping).
Can the neighbor labels just shrink in width instead of moving?

(Ideal would be some overlap or fade into transparency of the neighbor items, but these don't work with non-plain backgrounds.)

[susnux]

@jancborchardt maybe like this:

1. Only grow if needed
2. Keep the label centered

The problem with 2 is, that now the label needs to be quite small (we "waste" the space on one side).

Bildschirmaufnahme_20240814_120108.webm

(commit pushed)

[jancborchardt]

@susnux yeah I understand the issue – your last proposal seems like the best compromise for now. :)
(Maybe for the future it would be good to use some JS indeed to polish it more, considering it is the main nav)

@skjnldsv @Pytal what do you think?