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. |
How to set up and validate locally
- 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. - 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. - Add an Organization with a similarly long, unbroken name and confirm
Group > Plan > Customer relations > Organizationswraps 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.



