Fix org chart manager ordering and title wrapping

orgfront/tests/orgchart-vector-render.spec.ts

@@ -269,7 +269,7 @@ test("org chart displays user names with short grade aliases and no job details"
   await expect(svg.getByText(/팀장|Platform Engineer/)).toHaveCount(0);
 });
 
-test("org chart orders top executive members by rank priority", async ({
+test("org chart orders managers before top executive members by rank priority", async ({
   page,
 }) => {
   const executiveUser = (id: string, name: string, grade: string) => ({
@@ -293,6 +293,17 @@ test("org chart orders top executive members by rank priority", async ({
           executiveUser("u-president", "President", "사장"),
           executiveUser("u-chair", "Chair", "회장"),
           executiveUser("u-director", "Director", "전무"),
+          {
+            ...executiveUser("u-manager", "Team Manager", "사원"),
+            metadata: {
+              additionalAppointments: [
+                {
+                  tenantSlug: "engineering",
+                  isManager: true,
+                },
+              ],
+            },
+          },
         ],
       }),
     });
@@ -312,6 +323,7 @@ test("org chart orders top executive members by rank priority", async ({
     );
 
   expect(orderedMemberIds).toEqual([
+    "orgchart-member-u-manager",
     "orgchart-member-u-chair",
     "orgchart-member-u-president",
     "orgchart-member-u-vice-chair",
@@ -321,6 +333,42 @@ test("org chart orders top executive members by rank priority", async ({
   ]);
 });
 
+test("org chart expands organization node width so long names are not clipped", async ({
+  page,
+}) => {
+  const longName =
+    "초장문 조직 명칭 표시 검증을 위한 구조물 디지털 전환 통합 운영 센터";
+
+  await page.route("**/api/v1/public/orgchart**", async (route) => {
+    await route.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({
+        sharedWith: "Playwright",
+        tenants: [
+          tenant("group", "HMAC Group", "hmac"),
+          tenant("long-name", longName, "long-name", "group"),
+        ],
+        users: [user("u-long", "Long Name User", "long-name")],
+      }),
+    });
+  });
+
+  await page.goto("/chart?token=long-org-name");
+
+  const longNode = page.locator('[data-testid="orgchart-node-long-name"]');
+  await expect(longNode).toBeVisible();
+  const title = longNode.getByText(longName, { exact: true });
+  await expect(title).toBeVisible();
+
+  const titleMetrics = await title.evaluate((element) => ({
+    clientWidth: element.clientWidth,
+    scrollWidth: element.scrollWidth,
+  }));
+  expect(titleMetrics.scrollWidth).toBeLessThanOrEqual(
+    titleMetrics.clientWidth + 1,
+  );
+});
+
 test("org chart only highlights flagged member cards", async ({ page }) => {
   await page.route("**/api/v1/public/orgchart**", async (route) => {
     await route.fulfill({