From 0b97b50cc36a6a669bf82c8c527d2ca979111eea Mon Sep 17 00:00:00 2001
From: Hamza <hamzamahjoubi221@gmail.com>
Date: Mon, 11 May 2026 19:26:51 +0200
Subject: [PATCH] fix(recipient-list): scroll on overflow

Signed-off-by: Hamza <hamzamahjoubi221@gmail.com>
---
 src/components/Thread.vue | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index a58ff7f5fc..1a645d8e31 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -34,12 +34,14 @@
 									{{ moreParticipantsString }}
 								</span>
 							</template>
-							<RecipientBubble
-								v-for="participant in threadParticipants.slice(participantsToDisplay)"
-								:key="participant.email"
-								:title="participant.email"
-								:email="participant.email"
-								:label="participant.label" />
+							<div class="thread-participants-overflow">
+								<RecipientBubble
+									v-for="participant in threadParticipants.slice(participantsToDisplay)"
+									:key="participant.email"
+									:title="participant.email"
+									:email="participant.email"
+									:label="participant.label" />
+							</div>
 						</NcPopover>
 						<!-- Remaining participants, if any (Needed to have avatarHeader reactive) -->
 						<RecipientBubble
@@ -741,12 +743,16 @@ export default {
 	overflow: hidden;
 	display: flex;
 	align-items: stretch;
+}
 
-	:deep(.v-popper--theme-dropdown.v-popper__popper .v-popper__inner) {
-		height: 300px;
-		width: 250px;
-		overflow: auto;
-	}
+.thread-participants-overflow {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--default-grid-baseline);
+	max-height: min(50vh, 400px);
+	max-width: min(80vw, 320px);
+	overflow-y: auto;
 }
 
 .avatar-more {