From a4062d7c77638dfa656c5199ef1a3fd44f70d93d Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Fri, 29 May 2026 13:45:38 +0530
Subject: [PATCH] fix: constrain overflow tooltip width and wrap long project
 names

Apply BODY_TOOLTIP_MAX_WIDTH and BODY_TOOLTIP_WRAPPER_STYLE to the
+N project roles tooltip so content stays inside bounds and long
project names wrap instead of overflowing.
---
 .../members/+page.svelte                      | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index 8e72c0b51..363240108 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -173,23 +173,25 @@
                                 content="{getRoleLabel(firstRole)}: {firstProject?.name ??
                                     firstParsed?.projectId}" />
                             {#if overflow.length > 0}
-                                <Tooltip placement="top">
+                                <Tooltip placement="top" maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                                     <Badge size="xs" variant="secondary" content="+{overflow.length}" />
                                     <svelte:fragment slot="tooltip">
-                                        <Layout.Stack gap="xxs">
-                                            {#each overflow as overflowRole}
-                                                {@const p = parseProjectRole(overflowRole)}
-                                                {@const proj = p
-                                                    ? data.orgProjects?.projects?.find(
-                                                          (x) => x.$id === p.projectId
-                                                      )
-                                                    : null}
-                                                <Typography.Text color="--color-neutral-0" size="s">
-                                                    {getRoleLabel(overflowRole)}: {proj?.name ??
-                                                        p?.projectId}
-                                                </Typography.Text>
-                                            {/each}
-                                        </Layout.Stack>
+                                        <div style={BODY_TOOLTIP_WRAPPER_STYLE}>
+                                            <Layout.Stack gap="xxs">
+                                                {#each overflow as overflowRole}
+                                                    {@const p = parseProjectRole(overflowRole)}
+                                                    {@const proj = p
+                                                        ? data.orgProjects?.projects?.find(
+                                                              (x) => x.$id === p.projectId
+                                                          )
+                                                        : null}
+                                                    <Typography.Text size="s">
+                                                        {getRoleLabel(overflowRole)}: {proj?.name ??
+                                                            p?.projectId}
+                                                    </Typography.Text>
+                                                {/each}
+                                            </Layout.Stack>
+                                        </div>
                                     </svelte:fragment>
                                 </Tooltip>
                             {/if}