From 07bc5d790a01fb8ec3dc313b5665556fd7d6d345 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 17 Apr 2025 17:58:43 +0900
Subject: [PATCH] wip

---
 packages/frontend/src/components/MkButton.vue    |  4 ++--
 packages/frontend/src/components/MkDialog.vue    |  1 +
 .../frontend/src/components/MkFeatureBanner.vue  |  2 +-
 packages/frontend/src/components/MkFolder.vue    |  2 +-
 packages/frontend/src/components/MkKeyValue.vue  |  2 +-
 packages/frontend/src/components/MkNote.vue      |  2 +-
 .../frontend/src/components/MkNoteSimple.vue     |  2 +-
 packages/frontend/src/components/MkNoteSub.vue   |  2 +-
 .../frontend/src/components/MkNotification.vue   | 16 +++-------------
 packages/frontend/src/components/MkSuperMenu.vue |  8 ++++----
 packages/frontend/src/components/MkTooltip.vue   |  4 ++--
 packages/frontend/src/components/form/link.vue   |  4 ++--
 packages/frontend/src/pages/chat/XMessage.vue    |  2 +-
 packages/frontend/src/style.scss                 |  5 ++++-
 14 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index b301600478..20bbe89bd3 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -155,12 +155,12 @@ function onMousedown(evt: MouseEvent): void {
 
 	&.small {
 		font-size: 90%;
-		padding: 6px 12px;
+		padding: 8px 12px;
 	}
 
 	&.large {
 		font-size: 100%;
-		padding: 8px 16px;
+		padding: 10px 16px;
 	}
 
 	&.full {
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index 30159e4df1..5658f3584b 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -191,6 +191,7 @@ function onInputKeydown(evt: KeyboardEvent) {
 
 .icon {
 	font-size: 24px;
+	padding: 4px 0;
 
 	& + .title {
 		margin-top: 8px;
diff --git a/packages/frontend/src/components/MkFeatureBanner.vue b/packages/frontend/src/components/MkFeatureBanner.vue
index e990ffc8f0..659c9f12ab 100644
--- a/packages/frontend/src/components/MkFeatureBanner.vue
+++ b/packages/frontend/src/components/MkFeatureBanner.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-panel :class="$style.root">
 	<img :class="$style.img" :src="icon"/>
-	<div :class="$style.text">
+	<div :class="$style.text" class="_mt">
 		<slot></slot>
 	</div>
 </div>
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 04fa950401..9df9cec7bc 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -143,7 +143,7 @@ onMounted(() => {
 	align-items: center;
 	width: 100%;
 	box-sizing: border-box;
-	padding: 10px 12px 10px 12px;
+	padding: 11px 12px 11px 12px;
 	background: var(--MI_THEME-folderHeaderBg);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
diff --git a/packages/frontend/src/components/MkKeyValue.vue b/packages/frontend/src/components/MkKeyValue.vue
index b4185d2d0a..e3886a1c24 100644
--- a/packages/frontend/src/components/MkKeyValue.vue
+++ b/packages/frontend/src/components/MkKeyValue.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.key">
 		<slot name="key"></slot>
 	</div>
-	<div :class="$style.value" class="_selectable">
+	<div :class="$style.value" class="_selectable _mt">
 		<slot name="value"></slot>
 		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ti ti-copy"></i></button>
 	</div>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 6f1b6aa481..0f6a41e8a5 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
 		<MkAvatar :class="[$style.avatar, prefer.s.useStickyIcons ? $style.useSticky : null]" :user="appearNote.user" :link="!mock" :preview="!mock"/>
 		<div :class="$style.main">
-			<MkNoteHeader :note="appearNote" :mini="true"/>
+			<MkNoteHeader :note="appearNote" :mini="true" style="margin: 4px 0;"/>
 			<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index e684cf2a30..ca003671bf 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 	<div :class="$style.main">
-		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
+		<MkNoteHeader :class="$style.header" :note="note" :mini="true" style="margin: 4px 0;"/>
 		<div>
 			<p v-if="note.cw != null" :class="$style.cw">
 				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 4fd1c210cb..b035c649ad 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
 		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 		<div :class="$style.body">
-			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
+			<MkNoteHeader :class="$style.header" :note="note" :mini="true" style="margin: 4px 0;"/>
 			<div>
 				<p v-if="note.cw != null" :class="$style.cw">
 					<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'"/>
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 13ffd6b7cc..777abe4734 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -76,7 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-else-if="notification.type === 'app'">{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
 		</header>
-		<div>
+		<div class="_mt">
 			<MkA v-if="notification.type === 'reaction' || notification.type === 'reaction:grouped'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
 				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
@@ -296,6 +296,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	right: -2px;
 	width: 20px;
 	height: 20px;
+	line-height: 20px;
 	box-sizing: border-box;
 	border-radius: 100%;
 	background: var(--MI_THEME-panel);
@@ -310,73 +311,61 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 }
 
 .t_follow, .t_followRequestAccepted, .t_receiveFollowRequest {
-	padding: 3px;
 	background: var(--eventFollow);
 	pointer-events: none;
 }
 
 .t_renote {
-	padding: 3px;
 	background: var(--eventRenote);
 	pointer-events: none;
 }
 
 .t_quote {
-	padding: 3px;
 	background: var(--eventRenote);
 	pointer-events: none;
 }
 
 .t_reply {
-	padding: 3px;
 	background: var(--eventReply);
 	pointer-events: none;
 }
 
 .t_mention {
-	padding: 3px;
 	background: var(--eventOther);
 	pointer-events: none;
 }
 
 .t_pollEnded {
-	padding: 3px;
 	background: var(--eventOther);
 	pointer-events: none;
 }
 
 .t_achievementEarned {
-	padding: 3px;
 	background: var(--eventAchievement);
 	pointer-events: none;
 }
 
 .t_exportCompleted {
-	padding: 3px;
 	background: var(--eventOther);
 	pointer-events: none;
 }
 
 .t_roleAssigned {
-	padding: 3px;
 	background: var(--eventOther);
 	pointer-events: none;
 }
 
 .t_login {
-	padding: 3px;
 	background: var(--eventLogin);
 	pointer-events: none;
 }
 
 .t_createToken {
-	padding: 3px;
 	background: var(--eventOther);
 	pointer-events: none;
 }
 
 .t_chatRoomInvitationReceived {
-	padding: 3px;
 	background: var(--eventOther);
 	pointer-events: none;
 }
@@ -390,6 +379,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	display: flex;
 	align-items: baseline;
 	white-space: nowrap;
+	margin: 4px 0;
 }
 
 .headerName {
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index 1a0199ae49..cd1dec9364 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -49,12 +49,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 				<span class="text">
 					<template v-if="item.isRoot">
-						{{ item.label }}
+						<span class="_mt">{{ item.label }}</span>
 					</template>
 					<template v-else>
-						<span style="opacity: 0.7; font-size: 90%;">{{ item.parentLabels.join(' > ') }}</span>
+						<span style="opacity: 0.7; font-size: 90%;" class="_mt">{{ item.parentLabels.join(' > ') }}</span>
 						<br>
-						<span>{{ item.label }}</span>
+						<span class="_mt">{{ item.label }}</span>
 					</template>
 				</span>
 			</MkA>
@@ -235,7 +235,7 @@ function searchOnKeyDown(ev: KeyboardEvent) {
 				align-items: center;
 				width: 100%;
 				box-sizing: border-box;
-				padding: 10px 16px 10px 8px;
+				padding: 11px 16px 11px 8px;
 				border-radius: 9px;
 				font-size: 0.9em;
 
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index 3fe80f4ab4..69edd12cc1 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -106,8 +106,8 @@ onUnmounted(() => {
 
 .root {
 	position: absolute;
-	font-size: 0.8em;
-	padding: 8px 12px;
+	font-size: 80%;
+	padding: 10px 12px;
 	box-sizing: border-box;
 	text-align: center;
 	border-radius: 4px;
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index e60155f4af..cb00effa0a 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -50,10 +50,10 @@ const props = defineProps<{
 	align-items: center;
 	width: 100%;
 	box-sizing: border-box;
-	padding: 10px 14px;
+	padding: 12px 14px;
 	background: var(--MI_THEME-folderHeaderBg);
 	border-radius: 6px;
-	font-size: 0.9em;
+	font-size: 90%;
 
 	&:hover {
 		text-decoration: none;
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index def6ec7d14..ebb0c051d3 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<Mfm
 				v-if="message.text"
 				ref="text"
-				class="_selectable"
+				class="_selectable _mt"
 				:text="message.text"
 				:i="$i"
 				:nyaize="'respect'"
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 431d3d6e14..16ed11bfe1 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -178,8 +178,11 @@ rt {
 }
 
 // one-line text
-._1t {
+._t {
 	line-height: 1;
+	overflow: clip;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 // multi-line text