Truncate long names in detail cards and breadcrumbs

[iammajid]

Summary

• Add text truncation with hover tooltips to user/group detail cards (UserInfo, GroupInfo) and breadcrumb navigation
• Extract displayName computed property in UserInfo for cleaner template logic
• Fix email overflow in user detail card with proper flex constraints

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ad424047-2977-4cd8-abab-df810901434f

📥 Commits

Reviewing files that changed from the base of the PR and between f5408b3 and 5d76d7a.

📒 Files selected for processing (3)

• frontend/src/components/BreadcrumbNav.vue
• frontend/src/components/authority/GroupInfo.vue
• frontend/src/components/authority/UserInfo.vue

---

Walkthrough

This pull request adds text truncation and tooltip enhancements across three Vue components. BreadcrumbNav.vue and GroupInfo.vue each receive a single-line modification to add Tailwind truncate classes and title attributes to their primary display elements. UserInfo.vue introduces a computed displayName property that derives from user.firstName and user.lastName with a fallback to user.name, and applies truncation styling with tooltip attributes to the name, roles section, and email row. No changes were made to routing logic, component props, or role sorting behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Add BreadcrumbNav component for navigational breadcrumbs #345: Both PRs modify BreadcrumbNav.vue with the related PR adding the component and this PR adding truncation and tooltip functionality to breadcrumb item rendering.

Suggested reviewers

• overheadhunter

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding text truncation to long names in detail cards and breadcrumbs, which aligns with all three file modifications.
Description check	✅ Passed	The description is directly related to the changeset, providing context about text truncation, computed properties, and overflow fixes across the modified components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/truncate-long-names

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[overheadhunter]

the v-if seems misplaced here

[iammajid]

Should the condition be v-if="displayName !== user.name" instead, so it relies on the computed property rather than duplicating its logic?

[overheadhunter]

that should make it more clear, yes