fix(workspace): show member emails (#2393)

Co-authored-by: dadachann <185672915+dadachann@users.noreply.github.com>

web/tests/e2e/fixtures/langbot-api.ts

@@ -81,6 +81,7 @@ export interface WorkspaceEntryMock {
     uuid: string;
     workspace_uuid: string;
     account_uuid: string;
+    display_name: string;
     email: string;
     role: 'owner' | 'admin' | 'developer' | 'operator' | 'viewer';
     status: 'active';
@@ -155,6 +156,7 @@ export function makeWorkspaceEntry(
       uuid: `membership-${uuid}`,
       workspace_uuid: uuid,
       account_uuid: 'account-playwright',
+      display_name: 'Playwright Admin',
       email: 'admin@example.com',
       role: 'owner',
       status: 'active',

web/tests/e2e/workspace-member-email.spec.ts

@@ -0,0 +1,102 @@
+import { expect, test } from '@playwright/test';
+
+import {
+  installLangBotApiMocks,
+  makeWorkspaceEntry,
+} from './fixtures/langbot-api';
+
+const members = [
+  {
+    uuid: 'membership-owner',
+    workspace_uuid: 'workspace-email-test',
+    account_uuid: 'account-playwright',
+    display_name: 'RockChinQ',
+    email: 'rock@example.com',
+    role: 'owner',
+    status: 'active',
+    joined_at: '2026-08-01T00:00:00Z',
+    created_at: '2026-08-01T00:00:00Z',
+  },
+  {
+    uuid: 'membership-admin',
+    workspace_uuid: 'workspace-email-test',
+    account_uuid: 'account-admin',
+    display_name: 'Junyan Qin',
+    email: 'a.very.long.workspace.member.email.address@example-company.test',
+    role: 'admin',
+    status: 'active',
+    joined_at: '2026-08-02T00:00:00Z',
+    created_at: '2026-08-02T00:00:00Z',
+  },
+];
+
+test.use({ viewport: { width: 390, height: 844 } });
+
+test('workspace member list displays each member email without overlapping controls', async ({
+  page,
+}, testInfo) => {
+  const workspace = makeWorkspaceEntry(
+    'workspace-email-test',
+    'Email Test Workspace',
+    'cloud_projection',
+  );
+  workspace.membership.display_name = 'RockChinQ';
+  workspace.membership.email = 'rock@example.com';
+
+  await installLangBotApiMocks(page, {
+    authenticated: true,
+    workspaces: [workspace],
+  });
+  await page.route(
+    '**/api/v1/workspaces/workspace-email-test/members',
+    (route) =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 0, message: 'ok', data: { members } }),
+      }),
+  );
+  await page.route(
+    '**/api/v1/workspaces/workspace-email-test/invitations',
+    (route) =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 0,
+          message: 'ok',
+          data: { invitations: [] },
+        }),
+      }),
+  );
+
+  await page.goto('/home?action=showWorkspaceSettings');
+
+  await expect(page.getByText('RockChinQ')).toBeVisible();
+  await expect(page.getByText('rock@example.com')).toBeVisible();
+  await expect(page.getByText('Junyan Qin')).toBeVisible();
+  const longEmail = page.getByText(
+    'a.very.long.workspace.member.email.address@example-company.test',
+  );
+  await expect(longEmail).toBeVisible();
+  await longEmail.scrollIntoViewIfNeeded();
+
+  const roleSelect = page.getByRole('combobox').last();
+  const [emailBox, selectBox] = await Promise.all([
+    longEmail.boundingBox(),
+    roleSelect.boundingBox(),
+  ]);
+  expect(emailBox).not.toBeNull();
+  expect(selectBox).not.toBeNull();
+  const overlaps =
+    emailBox!.x < selectBox!.x + selectBox!.width &&
+    emailBox!.x + emailBox!.width > selectBox!.x &&
+    emailBox!.y < selectBox!.y + selectBox!.height &&
+    emailBox!.y + emailBox!.height > selectBox!.y;
+  expect(overlaps).toBe(false);
+  expect(selectBox!.y).toBeGreaterThanOrEqual(emailBox!.y + emailBox!.height);
+  await roleSelect.scrollIntoViewIfNeeded();
+
+  await page.screenshot({
+    path: testInfo.outputPath('workspace-member-emails-mobile.png'),
+    fullPage: true,
+  });
+});