:art:

1 files changed, 58 insertions, 41 deletions

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 0d794d84d5..890b99fcc2 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -4,18 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div role="menu" @focusin.passive.stop="() => {}">
+<div
+	role="menu"
+	:class="{
+		[$style.root]: true,
+		[$style.center]: align === 'center',
+		[$style.big]: big,
+		[$style.asDrawer]: asDrawer,
+	}"
+	@focusin.passive.stop="() => {}"
+>
 	<div
 		ref="itemsEl"
 		v-hotkey="keymap"
 		tabindex="0"
 		class="_popup _shadow"
-		:class="{
-			[$style.root]: true,
-			[$style.center]: align === 'center',
-			[$style.big]: big,
-			[$style.asDrawer]: asDrawer,
-		}"
+		:class="$style.menu"
 		:style="{
 			width: (width && !asDrawer) ? `${width}px` : '',
 			maxHeight: maxHeight ? `min(${maxHeight}px, calc(100dvh - 32px))` : 'calc(100dvh - 32px)',
@@ -300,6 +304,8 @@ async function showRadioOptions(item: MenuRadio, ev: Event) {
 }
 
 async function showChildren(item: MenuParent, ev: Event) {
+	ev.stopPropagation();
+
 	const children: MenuItem[] = await (async () => {
 		if (childrenCache.has(item)) {
 			return childrenCache.get(item)!;
@@ -421,56 +427,67 @@ onBeforeUnmount(() => {
 
 <style lang="scss" module>
 .root {
-	padding: 8px 0;
-	box-sizing: border-box;
-	max-width: 100vw;
-	min-width: 200px;
-	overflow: auto;
-	overscroll-behavior: contain;
-
-	&:focus-visible {
-		outline: none;
-	}
-
 	&.center {
-		> .item {
-			text-align: center;
+		> .menu {
+			> .item {
+				text-align: center;
+			}
 		}
 	}
 
 	&.big:not(.asDrawer) {
-		> .item {
-			padding: 6px 20px;
-			font-size: 1em;
-			line-height: 24px;
+		> .menu {
+			> .item {
+				padding: 6px 20px;
+				font-size: 1em;
+				line-height: 24px;
+			}
 		}
 	}
 
 	&.asDrawer {
-		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
-		width: 100%;
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
+		max-width: 600px;
+		margin: auto;
 
-		> .item {
-			font-size: 1em;
-			padding: 12px 24px;
+		> .menu {
+			padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
+			width: 100%;
+			border-radius: 24px;
+			border-bottom-right-radius: 0;
+			border-bottom-left-radius: 0;
 
-			&::before {
-				width: calc(100% - 24px);
-				border-radius: 12px;
+			> .item {
+				font-size: 1em;
+				padding: 12px 24px;
+
+				&::before {
+					width: calc(100% - 24px);
+					border-radius: 12px;
+				}
+
+				> .icon {
+					margin-right: 14px;
+					width: 24px;
+				}
 			}
 
-			> .icon {
-				margin-right: 14px;
-				width: 24px;
+			> .divider {
+				margin: 12px 0;
 			}
 		}
+	}
+}
 
-		> .divider {
-			margin: 12px 0;
-		}
+.menu {
+	padding: 8px 0;
+	box-sizing: border-box;
+	max-width: 100vw;
+	min-width: 200px;
+	overflow: auto;
+	overscroll-behavior: contain;
+
+	&:focus-visible {
+		outline: none;
 	}
 }