Fix/truncate invited by email

[chakrihacker]

Summary

Gives every column in the organization invitation table an explicit width and lets long inviter names truncate, so column boundaries stay put regardless of how long an email or name is.

Why

Only the email and inviter columns carried widths, and the inviter cell rendered in a span, which Tailwind's truncate cannot clip. A long invitee email or "Invited by" name stretched its cell, squeezing the date columns and pushing the actions button out of alignment with the rows above it.

What

• Explicit widths on all six columns of OrganizationInvitationTable: email 24%, status 10%, created 16%, expires 16%, inviter 26%, actions 64px.
• Inviter cell moved from span to div so truncate applies and long names ellipsize instead of expanding the column.

No prop, type, or export changes. Both changes are internal to organization-invitation-table.tsx.

Packages

• packages/core
• packages/react
• examples

References

Testing

Layout-only change, verified visually. No unit tests added — the column widths are inline styles produced by DataTable, and asserting pixel/percentage values in jsdom would test the styling implementation rather than any behavior.

1. Start an example app and navigate to Organization → Members → Invitations.
2. Create an invitation with a long invitee email (60+ characters) and an inviter whose display name is long.
3. Confirm both the email and "Invited by" cells clip with an ellipsis instead of widening.
4. Confirm the Created / Expires columns keep a stable width and the row actions button stays right-aligned across every row.

• This change adds unit test coverage
• Tested for both SPA and RWA flows, all example apps working
• All existing and new tests complete without errors

Checklist

• Breaking change
• Requires docs update
• Backward compatible

Contributing

• I have read the Auth0 general contribution guidelines
• I have read the Auth0 Code of Conduct

Summary by CodeRabbit

• Style
  • Improved invitation table column sizing for clearer information display.
  • Updated inviter text rendering to better handle long names without disrupting the table layout.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e78c4ccb-85fa-49cd-b893-5260288e05a9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• ✅ Review completed - (🔄 Check again to review again)

---

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.}