From 70c6ff9e115720e2754bf73cae38ec4fc2b19255 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Tue, 13 Aug 2024 19:30:54 +0200 Subject: [PATCH 1/2] fix(AppMenu): Prevent menu entries from jumping on hover Only grow and shrink app menu entry if needed Signed-off-by: Ferdinand Thiessen --- core/src/components/AppMenu.vue | 10 ------ core/src/components/AppMenuEntry.vue | 52 ++++++++++++++++++---------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue index 28b0cd3b67e67..265191768af9d 100644 --- a/core/src/components/AppMenu.vue +++ b/core/src/components/AppMenu.vue @@ -123,16 +123,6 @@ export default defineComponent({ display: flex; flex-wrap: nowrap; margin-inline: calc(var(--app-menu-entry-growth) / 2); - transition: margin-inline var(--animation-quick) ease-in-out; - - // Remove padding if the first child is focussed - &:has(.app-menu-entry:hover:first-child, .app-menu-entry:focus-within:first-child) { - margin-inline: 0 calc(var(--app-menu-entry-growth) / 2); - } - // Remove padding if the last child is focussed - &:has(.app-menu-entry:hover:last-child, .app-menu-entry:focus-within:last-child) { - margin-inline: calc(var(--app-menu-entry-growth) / 2) 0; - } } &__overflow { diff --git a/core/src/components/AppMenuEntry.vue b/core/src/components/AppMenuEntry.vue index cef6d413dcd9b..1bf160f06952f 100644 --- a/core/src/components/AppMenuEntry.vue +++ b/core/src/components/AppMenuEntry.vue @@ -4,9 +4,11 @@ -->