From fd61ac5221da56c0c9743a96eac4cbdcbbcaa41d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 17 Apr 2025 20:23:27 +0900
Subject: refactor(frontend): refactor styles

---
 packages/frontend/src/components/MkMenu.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

(limited to 'packages/frontend/src/components/MkMenu.vue')

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 44f5a09404..fbae4f0d8a 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -31,9 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template v-for="item in (items2 ?? [])">
 			<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
 
-			<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-				<span style="opacity: 0.7;">{{ item.text }}</span>
-			</span>
+			<div v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label]">
+				<span>{{ item.text }}</span>
+			</div>
 
 			<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
 				<span><MkEllipsis/></span>
@@ -619,12 +619,6 @@ onBeforeUnmount(() => {
 		--menuActiveBg: var(--MI_THEME-accentedBg);
 	}
 
-	&.label {
-		pointer-events: none;
-		font-size: 0.7em;
-		padding-bottom: 4px;
-	}
-
 	&.pending {
 		pointer-events: none;
 		opacity: 0.7;
@@ -694,6 +688,19 @@ onBeforeUnmount(() => {
 	font-size: 12px;
 }
 
+.label {
+	position: relative;
+	padding: 6px 16px;
+	box-sizing: border-box;
+	white-space: nowrap;
+	font-size: 0.7em;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+	pointer-events: none;
+}
+
 .divider {
 	margin: 8px 0;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-- 
cgit v1.2.3-freya