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; + } } }