From d1e151172b8e7b41e443e4ce33e2ad710aa0de55 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Jun 2022 13:39:28 +0900
Subject: [PATCH] chore(client): tweak client design

---
 .../src/components/instance-card-mini.vue     |  4 ++-
 .../client/src/components/user-card-mini.vue  |  4 ++-
 packages/client/src/pages/user-info.vue       | 36 ++++++++++++++++---
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/instance-card-mini.vue
index edcd576ce0..0bac6c0ad0 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -62,7 +62,9 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' })
 		}
 
 		> :global(.sub) {
-			font-size: 75%;
+			display: block;
+			width: 100%;
+			font-size: 80%;
 			opacity: 0.7;
 			line-height: $bodyInfoHieght;
 			white-space: nowrap;
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
index 9a286a1a83..d83e4a56f5 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/user-card-mini.vue
@@ -61,7 +61,9 @@ os.api('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).t
 		}
 
 		> :global(.sub) {
-			font-size: 75%;
+			display: block;
+			width: 100%;
+			font-size: 95%;
 			opacity: 0.7;
 			line-height: $bodyInfoHieght;
 			white-space: nowrap;
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index ad11ae045b..cc187b9df3 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -6,6 +6,10 @@
 			<div v-if="tab === 'overview'" class="_formRoot">
 				<div class="_formBlock aeakzknw">
 					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
+					<div class="body">
+						<span class="name"><MkUserName class="name" :user="user"/></span>
+						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
+					</div>
 				</div>
 
 				<div v-if="user.url" class="_formLinksGrid _formBlock">
@@ -17,11 +21,6 @@
 				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
 
 				<div class="_formBlock">
-					<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
-						<template #key>Acct</template>
-						<template #value><span class="_monospace">{{ acct(user) }}</span></template>
-					</MkKeyValue>
-
 					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
 						<template #key>ID</template>
 						<template #value><span class="_monospace">{{ user.id }}</span></template>
@@ -264,10 +263,37 @@ definePageMetadata(computed(() => ({
 
 <style lang="scss" scoped>
 .aeakzknw {
+	display: flex;
+	align-items: center;
+
 	> .avatar {
 		display: block;
 		width: 64px;
 		height: 64px;
+		margin-right: 16px;
+	}
+
+	> .body {
+		flex: 1;
+		overflow: hidden;
+
+		> .name {
+			display: block;
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		> .sub {
+			display: block;
+			width: 100%;
+			font-size: 85%;
+			opacity: 0.7;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }