Removed handle from bio socials to save space.

components/actors/bio.vue

@@ -312,10 +312,10 @@
 					<a
 						v-for="social in socials"
 						:key="`social-${social.id}`"
+						v-tooltip="social.platform ? `${social.platform} ${env.socials.prefix[social.platform] || env.socials.prefix.default}${social.handle}` : social.url"
 						:href="getSocialUrl(social)"
 						target="_blank"
 						rel="noopener"
-						:title="social.platform || social.url"
 						class="social ellipsis"
 					>
 						<Icon
@@ -339,7 +339,9 @@
 							:class="`icon-social icon-${social.platform} icon-generic`"
 						/>
 
+						<!--
 						<template v-if="social.platform">{{ env.socials.prefix[social.platform] || env.socials.prefix.default }}</template>{{ social.handle }}
+						-->
 					</a>
 				</ul>
 			</div>
@@ -498,7 +500,7 @@ function getSocialUrl(social) {
 	return null;
 }
 
-const socials = props.actor.socials.map((social) => ({
+const socials = props.actor.socials.slice(0, 10).map((social) => ({
 	...social,
 	handle: social.url
 		? new URL(social.url).hostname
@@ -735,19 +737,23 @@ const socials = props.actor.socials.map((social) => ({
 }
 
 .socials {
+	display: flex;
+	flex-wrap: wrap;
+	/*
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	grid-gap: 0 0;
 	overflow: hidden;
+	*/
 	gap: .25rem;
 	padding: 0;
 }
 
 .social {
-	display: flex;
-	height: 2rem;
+	display: inline-flex;
 	align-items: center;
-	padding: .1rem .5rem;
+	justify-content: center;
+	padding: .75rem .75rem;
 	border-radius: .25rem;
 	color: inherit;
 	text-decoration: none;
@@ -755,10 +761,6 @@ const socials = props.actor.socials.map((social) => ({
 	font-weight: normal;
 	background: var(--highlight-weak-40);
 
-	.icon {
-		margin-right: .5rem;
-	}
-
 	.icon-generic {
 		fill: var(--highlight);
 	}