Using actors avatars table for secondary profile photos.

pages/actors/@actorId/+Page.vue

@@ -37,10 +37,10 @@
 
 			<div
 				class="photos nobar"
-				:class="{ 'has-avatar': actor.avatar, 'has-photos': actor.avatar ? photos.length > 1 : photos.length > 0 }"
+				:class="{ 'has-avatar': actor.avatar, 'has-photos': actor.avatar ? actor.photos.length > 1 : actor.photos.length > 0 }"
 			>
 				<div
-					v-for="photo in photos"
+					v-for="photo in actor.photos"
 					:key="`photo-${photo.id}`"
 					class="photo-container"
 					:class="{ avatar: photo.isAvatar }"
@@ -92,13 +92,6 @@ const { pageProps, routeParams } = pageContext;
 const { actor } = pageProps;
 
 const domain = routeParams.domain;
-
-const photos = Object.values(Object.fromEntries(actor.profiles
-	.filter((profile) => !!profile.avatar)
-	.map((profile) => [profile.avatar.id, {
-		...profile.avatar,
-		isAvatar: profile.avatar.id === actor.avatar.id,
-	}])));
 </script>
 
 <style scoped>

pages/actors/@actorId/edit/+Page.vue

@@ -748,14 +748,12 @@ const bustSizes = {
 bustSizes.uk = bustSizes.us;
 bustSizes.jp = bustSizes.eu;
 
-const avatars = Object.values(Object.fromEntries(actor.value.profiles.filter((profile) => !!profile.avatar).map((profile) => [profile.avatar.id, profile.avatar])));
-
 const fields = computed(() => [
-	...(avatars.length > 0 ? [{
+	...(actor.value.photos.length > 0 ? [{
 		key: 'avatar',
 		type: 'avatar',
 		value: actor.value.avatar?.id,
-		options: avatars,
+		options: actor.value.photos,
 	}] : []),
 	...(user.role === 'admin'
 		? [{
@@ -1010,6 +1008,7 @@ async function submit() {
 	align-items: center;
 	padding: .25rem 1rem;
 	margin-bottom: .25rem;
+	overflow: hidden;
 
 	&.inline {
 		display: inline-flex;
@@ -1049,6 +1048,7 @@ async function submit() {
 	display: flex;
 	align-items: center;
 	flex-grow: 1;
+	overflow: hidden;
 
 	.input {
 		flex-grow: 1;
@@ -1140,6 +1140,7 @@ async function submit() {
 }
 
 .avatars {
+	width: 100%;
 	display: flex;
 	gap: .25rem;
 	padding-bottom: .5rem;