Move follow button + always show label

packages/client/src/pages/user/home.vue

@@ -134,20 +134,19 @@
 						</div>
 						<div class="follow-container">
 							<div class="actions">
-								<MkFollowButton
-									:user="user"
-									@refresh="emit('refresh')"
-									:inline="true"
-									:transparent="false"
-									:full="!narrow"
-									class="koudoku"
-								/>
 								<button class="menu _button" @click="menu">
 									<i
 										class="ph-dots-three-outline ph-bold ph-lg"
 									></i>
 								</button>
-								<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
+								<MkFollowButton
+									:user="user"
+									@refresh="emit('refresh')"
+									:inline="true"
+									:transparent="false"
+									:full="true"
+									class="koudoku"
+								/>
 							</div>
 						</div>
 						<div class="description">
@@ -490,29 +489,6 @@ onUnmounted(() => {
 						border-radius: 6px;
 					}
 
-					> .actions {
-						position: absolute;
-						top: 12px;
-						right: 12px;
-						padding: 8px;
-						border-radius: 24px;
-
-						> .menu {
-							vertical-align: bottom;
-							height: 31px;
-							width: 31px;
-							color: #fff;
-							text-shadow: 0 0 8px var(--shadow);
-							font-size: 16px;
-						}
-
-						> .koudoku {
-							margin-left: 4px;
-							width: 31px;
-							vertical-align: bottom;
-						}
-					}
-
 					> .title {
 						position: absolute;
 						bottom: 0;
@@ -581,22 +557,23 @@ onUnmounted(() => {
 
 					> .actions {
 						position: absolute;
-						top: 12px;
+						top: 6px;
 						right: 12px;
 						padding: 8px;
 						border-radius: 24px;
+						display: flex;
+						justify-content: center;
+						align-items: center;
 
 						> .menu {
-							vertical-align: bottom;
 							height: 31px;
 							width: 31px;
 							color: --fg;
 							font-size: 16px;
 						}
 
-						> .koudoku {
+						> :deep(.follow-button) {
-							margin-left: 4px;
+							margin-left: 8px;
-							vertical-align: bottom;
 						}
 					}
 
@@ -797,6 +774,13 @@ onUnmounted(() => {
 
 				> .title {
 					display: block;
+					border-bottom: 0;
+					padding-bottom: 0;
+					> .bottom {
+						> .username {
+							margin-right: 0;
+						}
+					}
 				}
 
 				> .avatar {
@@ -822,15 +806,19 @@ onUnmounted(() => {
 				}
 
 				> .description {
-					top: -55px;
+					top: 0;
 					position: relative;
 				}
 
 				> .follow-container {
 					overflow: visible !important;
+					display: flex;
+					justify-content: center;
+					height: auto;
+					border-bottom: 1px solid var(--divider);
+					padding-bottom: 5px;
 					> .actions {
-						top: -110px;
+						position: static;
-						right: 0px;
 					}
 				}
 			}

packages/client/src/style.scss

@@ -212,6 +212,11 @@ hr {
 		opacity: 0.5;
 		cursor: default;
 	}
+
+	> i:only-child {
+		display: block;
+		margin: auto;
+	}
 }
 
 ._buttonPrimary {