Fix dock hover wobble

[Sun0fABeach]

Gets rid of the wobble effect when hovering over a dock icon. Also increases the horizontal margin by between icons by 2px so that they don't touch when the hover transform happens.

[Sun0fABeach]

For a visual demonstration of the improvement, see this issue I opened.
#434

[mayankchhabra]

Hey Markus! Thanks for working on this, really appreciate it.

I agree with you on the issue — the dock wobble isn't a pleasing effect and we should fix it. However, increasing margin between apps and removing margins on hover has two issues:

1. The margins on top are no longer consistent with the margins between apps:

To make them consistent, we could increase the height of dock's background, but that increases surface area of dock which has its own downside (it will end up taking more area from the main content).

2. The margins between app <> app and app <> divider are no longer consistent on hover, which makes the layout unevenly spread out:

---

Thinking out load here, perhaps the ideal way to fix the wobble effect would be to detect hover on not just app icons, but also in between the icons and expand dock's width appropriately. Then as long as the cursor is within this boundary (and/or on an app icon) for say 100ms (to make the assumption that the user is moving the cursor between the icons), the dock wouldn't wobble:

What do you think?

[Sun0fABeach]

1. The margins on top are no longer consistent with the margins between apps

Agreed. I pushed another commit that sets the horizontal margins back to the old value and reduces the scaling effect instead.

2. The margins between app <> app and app <> divider are no longer consistent on hover, which makes the layout unevenly spread out

I'm no design expert, but imho something like that is expected when you play this kind of transition effect. If your aspiration is to keep symmetry with surrounding UI elements while it plays, you'll encounter a lot of layout shift situations (as you do right now).

Thinking out load here, perhaps the ideal way to fix the wobble effect would be to detect hover on not just app icons, but also in between the icons and expand dock's width appropriately. Then as long as the cursor is within this boundary (and/or on an app icon) for say 100ms (to make the assumption that the user is moving the cursor between the icons), the dock wouldn't wobble

If you keep the dock container's width expanded and stable while hovering, the icons will just wobble inside instead. Basically, the wobble effect is created because the increasing margin will push the adjacent icons aside.

[nmfretz]

Good call on fixing the dock wobble @Sun0fABeach. I have attempted to address the issue, while preserving the app spacing within the dock as @mayankchhabra noted. See Pull Request #435.

[Sun0fABeach]

Closing this as the solution by @nmfretz is more thorough and feels great imo.