diff --git a/src/public/app/menus/context_menu.ts b/src/public/app/menus/context_menu.ts index b5c53beaf..9793601d7 100644 --- a/src/public/app/menus/context_menu.ts +++ b/src/public/app/menus/context_menu.ts @@ -170,14 +170,12 @@ class ContextMenu { } if (this.isMobile && "items" in item && item.items) { - // We run using a timeout to avoid the layout change during event handling, which would trigger the menu to be hidden sometimes. - setTimeout(() => { - $(e.target) - .closest(".dropdown-item") - .find("ul.dropdown-menu") - .toggleClass("show"); - }, 0); - e.preventDefault(); + const $item = $(e.target) + .closest(".dropdown-item"); + + $item.toggleClass("submenu-open"); + $item.find("ul.dropdown-menu") + .toggleClass("show"); return false; } diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 4d34a1e95..18a901192 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1014,7 +1014,6 @@ html body .dropdown-item.disabled { justify-content: center; top: 0; right: 0; - height: 100%; margin: unset !important; border: unset !important; padding: 0 4px; @@ -1023,6 +1022,18 @@ html body .dropdown-item.disabled { color: var(--menu-item-arrow-color) !important; } +body.desktop .dropdown-menu .dropdown-toggle::after { + height: 100%; +} + +body.mobile .dropdown-menu .dropdown-toggle::after { + transform: rotate(90deg); +} + +body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after { + transform: rotate(270deg); +} + /* * Calendar */