enhance(client): tweak ui

4 files changed, 10 insertions, 8 deletions

diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/ui/button.vue
index 5f5d6d42ed..d3a4b5ea92 100644
--- a/packages/client/src/components/ui/button.vue
+++ b/packages/client/src/components/ui/button.vue
@@ -46,7 +46,7 @@ export default defineComponent({
 		rounded: {
 			type: Boolean,
 			required: false,
-			default: false,
+			default: true,
 		},
 		inline: {
 			type: Boolean,
diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index e637d361cf..165c3db462 100644
--- a/packages/client/src/components/ui/context-menu.vue
+++ b/packages/client/src/components/ui/context-menu.vue
@@ -1,16 +1,16 @@
 <template>
 <transition :name="$store.state.animation ? 'fade' : ''" appear>
 	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
+		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </transition>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount } from 'vue';
-import contains from '@/scripts/contains';
 import MkMenu from './menu.vue';
 import { MenuItem } from './types/menu.vue';
+import contains from '@/scripts/contains';
 import * as os from '@/os';
 
 const props = defineProps<{
diff --git a/packages/client/src/components/ui/child-menu.vue b/packages/client/src/components/ui/menu.child.vue
index a0c26b50cd..b67224d3e1 100644
--- a/packages/client/src/components/ui/child-menu.vue
+++ b/packages/client/src/components/ui/menu.child.vue
@@ -14,6 +14,7 @@ import * as os from '@/os';
 const props = defineProps<{
 	items: MenuItem[];
 	targetElement: HTMLElement;
+	rootElement: HTMLElement;
 	width?: number;
 	viaKeyboard?: boolean;
 }>();
@@ -27,9 +28,10 @@ const el = ref<HTMLElement>();
 const align = 'left';
 
 function setPosition() {
+	const rootRect = props.rootElement.getBoundingClientRect();
 	const rect = props.targetElement.getBoundingClientRect();
-	const left = rect.left + props.targetElement.offsetWidth;
-	const top = rect.top - 8;
+	const left = props.targetElement.offsetWidth;
+	const top = (rect.top - rootRect.top) - 8;
 	el.value.style.left = left + 'px';
 	el.value.style.top = top + 'px';
 }
@@ -58,6 +60,6 @@ defineExpose({
 
 <style lang="scss" scoped>
 .sfhdhdhr {
-	position: fixed;
+	position: absolute;
 }
 </style>
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 26283ffe55..6d1a2cc770 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -50,7 +50,7 @@
 		</span>
 	</div>
 	<div v-if="childMenu" class="child">
-		<XChild ref="child" :items="childMenu" :target-element="childTarget" showing @actioned="childActioned"/>
+		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
 	</div>
 </div>
 </template>
@@ -61,7 +61,7 @@ import { focusPrev, focusNext } from '@/scripts/focus';
 import FormSwitch from '@/components/form/switch.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
 import * as os from '@/os';
-const XChild = defineAsyncComponent(() => import('./child-menu.vue'));
+const XChild = defineAsyncComponent(() => import('./menu.child.vue'));
 
 const props = defineProps<{
 	items: MenuItem[];