fixup! feat: add recipient info on the right side of the composer

Signed-off-by: greta <[email protected]>
nextcloud · Nov 5, 2024 · 296f673 · 296f673
1 parent fd1ffc6
commit 296f673
Showing 1 changed file with 21 additions and 23 deletions.
diff --git 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;