From 05f314bae4684aeb759091125dab32fc46543059 Mon Sep 17 00:00:00 2001
From: jqqin <63757369+jqqin@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:04:13 -0400
Subject: [PATCH] fix: prevent user groups overflow in profile preview (#22547)

Add flex-wrap, max-h-20, and overflow-y-auto to the groups container
in UserStatus.svelte to prevent horizontal overflow when users have
many groups. Groups now wrap to multiple rows with a scrollbar when
exceeding the max height.

Co-authored-by: QinQin <qinqin@geotab.com>
---
 src/lib/components/channel/Messages/Message/UserStatus.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/channel/Messages/Message/UserStatus.svelte b/src/lib/components/channel/Messages/Message/UserStatus.svelte
index cb4089889..c4e6cce75 100644
--- a/src/lib/components/channel/Messages/Message/UserStatus.svelte
+++ b/src/lib/components/channel/Messages/Message/UserStatus.svelte
@@ -103,7 +103,7 @@
 		{/if}
 
 		{#if (user?.groups ?? []).length > 0}
-			<div class="mx-3.5 mt-2 flex gap-0.5">
+			<div class="mx-3.5 mt-2 flex flex-wrap gap-0.5 max-h-20 overflow-y-auto">
 				{#each user.groups as group}
 					<div
 						class="px-1.5 py-0.5 rounded-lg bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs"