From b4f75069508101cfc1da057da7dea19c82b902ce Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Fri, 16 Jun 2023 22:05:36 -0400
Subject: [PATCH] Fix mini follow button label + its position in user cards

---
 .../client/src/components/MkFollowButton.vue  | 20 ++++++++++++-------
 packages/client/src/components/MkUserInfo.vue | 12 +++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index bff393fddf..9dc5af4f63 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -20,16 +20,17 @@
 		:disabled="wait"
 		@click.stop="onClick"
 		:aria-label="`${state} ${user.name || user.username}`"
+		v-tooltip="full ? null : `${state} ${user.name || user.username}`"
 	>
 		<template v-if="!wait">
 			<template v-if="isBlocking">
-				<span v-if="full">{{ (state = i18n.ts.blocked) }}</span
+				<span>{{ (state = i18n.ts.blocked) }}</span
 				><i class="ph-prohibit ph-bold ph-lg"></i>
 			</template>
 			<template
 				v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
 			>
-				<span v-if="full">{{
+				<span>{{
 					(state = i18n.ts.followRequestPending)
 				}}</span
 				><i class="ph-hourglass-medium ph-bold ph-lg"></i>
@@ -38,24 +39,24 @@
 				v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
 			>
 				<!-- つまりリモートフォローの場合。 -->
-				<span v-if="full">{{ (state = i18n.ts.processing) }}</span
+				<span>{{ (state = i18n.ts.processing) }}</span
 				><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
 			</template>
 			<template v-else-if="isFollowing">
-				<span v-if="full">{{ (state = i18n.ts.unfollow) }}</span
+				<span>{{ (state = i18n.ts.unfollow) }}</span
 				><i class="ph-minus ph-bold ph-lg"></i>
 			</template>
 			<template v-else-if="!isFollowing && user.isLocked">
-				<span v-if="full">{{ (state = i18n.ts.followRequest) }}</span
+				<span>{{ (state = i18n.ts.followRequest) }}</span
 				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 			<template v-else-if="!isFollowing && !user.isLocked">
-				<span v-if="full">{{ (state = i18n.ts.follow) }}</span
+				<span>{{ (state = i18n.ts.follow) }}</span
 				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ (state = i18n.ts.processing) }}</span
+			<span>{{ (state = i18n.ts.processing) }}</span
 			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
 	</button>
@@ -185,6 +186,7 @@ onBeforeUnmount(() => {
 .menu {
 	width: 3em;
 	height: 2em;
+	vertical-align: middle;
 }
 .follow-button {
 	position: relative;
@@ -200,6 +202,7 @@ onBeforeUnmount(() => {
 	height: 2em;
 	border-radius: 100px;
 	background: var(--bg);
+	vertical-align: middle;
 
 	&.full {
 		padding: 0.2em 0.7em;
@@ -215,6 +218,9 @@ onBeforeUnmount(() => {
 
 	&:not(.full) {
 		width: 31px;
+		span {
+			display: none;
+		}
 	}
 
 	&:focus-visible {
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 2207363ee7..dc81b2643c 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -45,12 +45,12 @@
 				<MkNumber :value="user.followersCount" />
 			</div>
 		</div>
-		<MkFollowButton
-			v-if="$i && user.id != $i.id"
-			class="koudoku-button"
-			:user="user"
-			full
-		/>
+		<div class="koudoku-button">
+			<MkFollowButton
+				v-if="$i && user.id != $i.id"
+				:user="user"
+			/>
+		</div>
 	</div>
 </template>