wip

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 {

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;

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>

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));

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>

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">

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"/>

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'"/>

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 {

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;
 

packages/frontend/src/components/MkTooltip.vue

@@ -106,8 +106,8 @@ onUnmounted(() => {
 
 .root {
 	position: absolute;
-	font-size: 0.8em;
+	font-size: 80%;
-	padding: 8px 12px;
+	padding: 10px 12px;
 	box-sizing: border-box;
 	text-align: center;
 	border-radius: 4px;

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;

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'"

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