Fix long text overflow in CRM contacts and organizations tables

What does this MR do and why?

Both list views under a group's Customer Relations feature (Plan > Customer relations > Contacts and > Organizations) render their tables with <gl-table fixed>, which sets table-layout: fixed and gives every column a rigid width. Table cells only wrap at natural break points (spaces, hyphens). Real-world values like email addresses and organization names often have none of those, so once a value is longer than its column's width, it doesn't wrap — it overflows straight through the neighboring columns, making them unreadable.

This was reported against the Contacts table specifically: a long email address (as short as 34 characters, reproducible at window.innerWidth around 1438px) overlapped the Phone column. The overlap is more visible with the Layout width user preference (User Settings > Preferences) set to Fixed, since that caps the available table width; the same unbroken-word overflow still happens with Fluid layout once the window is narrow enough — it's a column-width issue, not specific to either layout preference. The Organizations table has the identical issue for long organization names.

This adds the existing gl-break-anywhere utility class (overflow-wrap: anywhere) to the free-text columns in both tables (Email/Description in Contacts, Name/Description in Organizations), so long unbroken values wrap within their own column instead of overlapping neighboring cells. This is a display-only fix; no data or behavior changes.

References

None.

Screenshots or screen recordings

Reproduced locally with synthetic data (not the reporter's original screenshot/data, which contained real contact information).

Before After
Long email/organization-name values overflow into neighboring columns. Long values wrap within their own column; no overlap.

after_table

before_table

org_after_1150

org_before_1150

How to set up and validate locally

  1. Enable a group's Customer Relations feature and add a contact whose email address is long and has no hyphens, e.g. janedoeinternational@internationalshippinglogisticscorp.com.
  2. Visit Group > Plan > Customer relations > Contacts. Before this change, the email text runs into the Phone/Description/Organization columns; after, it wraps within the Email column.
  3. Add an Organization with a similarly long, unbroken name and confirm Group > Plan > Customer relations > Organizations wraps it instead of overlapping the Default Rate/Description columns.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Ross Fisher

Merge request reports

Loading
Loading