From 296f673374dda98c0f259945612ad8d65b676c87 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Tue, 5 Nov 2024 14:30:29 +0100
Subject: [PATCH] fixup! feat: add recipient info on the right side of the
 composer

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/RecipientInfo.vue | 44 +++++++++++++++-----------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/RecipientInfo.vue b/src/components/RecipientInfo.vue
index 5658b8d953..77a8e6e320 100644
--- a/src/components/RecipientInfo.vue
+++ b/src/components/RecipientInfo.vue
@@ -29,8 +29,8 @@
 						:disable-tooltip="true"
 						:disable-menu="true" />
 					<div class="expand-toggle" @click="toggleExpand(index)">
-						<IconArrowUp v-if="isExpanded(index)" size="16" />
-						<IconArrowDown v-else size="16" />
+						<IconArrowUp v-if="isExpanded(index)" :size="16" />
+						<IconArrowDown v-else :size="16" />
 					</div>
 				</div>
 				<div class="recipient-list">
@@ -115,18 +115,34 @@ export default {
 
 <style scoped lang="scss">
 .recipient-info {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+.recipient-single {
+	width: 400px;
 	display: flex;
 	flex-direction: column;
-	padding: 10px;
+	align-items: center;
+	text-align: center;
 }
 
-.recipient-single,
-.recipient-item {
+.recipient-header {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
+}
+
+.recipient-avatar {
 	margin-bottom: 10px;
 }
 
+.recipient-details {
+	max-width: 100%;
+}
+
 .recipient-multiple {
 	margin-top: 10px;
 }
@@ -135,13 +151,6 @@ export default {
 	margin-bottom: 10px;
 }
 
-.recipient-header {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	margin-bottom: 1rem;
-}
-
 .recipient-item-details {
 	margin-left: 10px;
 	flex-grow: 1;
@@ -161,21 +170,10 @@ export default {
 }
 .recipient-header {
 	display: flex;
-	align-items: flex-start;
 	gap: 1rem;
 	margin-bottom: 1rem;
 }
 
-.recipient-avatar {
-	flex-shrink: 0;
-}
-
-.recipient-details {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
 span {
 	color: #666;
 	font-size: 0.9rem;