Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: constrain overflow tooltip width and wrap long project names

Browse Source 
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.
This commit is contained in:
harsh mahajan
2026-05-29 13:45:38 +05:30
parent 2b87920286
commit a4062d7c77
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/organization-[organization]/members/+page.svelte
+17 -15
View File
@@ -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}