Work break issues on the activity list

[klydexa]

Check Images : ​https://drive.google.com/drive/folders/1IpZeQdBle42q07mzWQ11okfABsPhLQMw?usp=sharing

Before
body.bp-user .wp-p2-tlrow .title-ln {

font-size: 14px;
color: var(--c-ink-2);
line-height: 1.5;

}

After
body.bp-user .wp-p2-tlrow .title-ln {

font-size: 14px;
color: var(--c-ink-2);
line-height: 1.5;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;

}

[softglaze]

Reproduction and Patch Testing Report

Reproduced and measured. The patch works, but only one of its three declarations is doing anything.

Environment

• Browser: Chrome 151.0.7922.174 (64-bit)
• OS: Windows 11 Pro N, build 26200
• Display: 200% scaling, devicePixelRatio 2
• Profile used: ​https://profiles.wordpress.org/dilip2615/
• Date: 22 August 2026

Steps taken

1. Opened the profile above and paged the activity list to page 2 of 42, where a Plugins SVN commit message contains a raw URL.
2. Measured every .title-ln on the page:

const rows = [...document.querySelectorAll('body.bp-user .wp-p2-tlrow .title-ln')];
const over = rows.filter(el => el.scrollWidth > el.clientWidth);
console.log('rows:', rows.length, 'overflowing:', over.length);
over.forEach(el => console.log(el.clientWidth, '->', el.scrollWidth, '|', el.textContent.trim().slice(0, 70)));

3. 🐞 Bug occurs. rows: 10 overflowing: 1, and the overflowing row measures clientWidth 385 against scrollWidth 472. 87px of overflow. The entry is changeset [3638597], whose message contains href="http://plugins.trac.wordpress.org/wiki/WordPress">WordPress</a>.org, a run with no spaces in it. The text visibly runs off the right edge of the card.
4. Injected only the first of the three proposed declarations, and re-counted:

const s = document.createElement('style');
s.textContent = 'body.bp-user .wp-p2-tlrow .title-ln { overflow-wrap: anywhere; }';
document.head.appendChild(s);
const rows = [...document.querySelectorAll('body.bp-user .wp-p2-tlrow .title-ln')];
console.log('after overflow-wrap alone, overflowing:', rows.filter(el => el.scrollWidth > el.clientWidth).length);

5. ✅ after overflow-wrap alone, overflowing: 0, and the URL now wraps across four lines inside the card.

Expected result

• A long unbreakable string in an activity title should wrap inside the card rather than overflow it.

Additional Notes

The trigger is a token with no break opportunity, in practice a raw URL inside an SVN commit message. Ordinary prose wraps correctly without any of these properties, which is why this is easy to miss. On a profile whose activity is all normal sentences, every row measures the same value for clientWidth and scrollWidth and nothing reproduces.

It is also paginated out of view. On this profile the affected entry is on page 2 of 42. My first run, before paging, returned overflowing: 0 on the same code. A tester who loads page 1, measures, and stops will conclude the report is wrong. Worth putting in any test instructions.

On the three proposed declarations, from the computed values on the live page before applying anything:

• overflow-wrap computes to normal. This is the one that matters. On its own it takes the overflow count to zero.
• white-space already computes to normal, so white-space: normal changes nothing.
• word-break: break-word is a deprecated alias, and overflow-wrap above already covers the same case.

So this could be a single added declaration. I used anywhere rather than break-word because it also allows the line box to shrink; I have not tested whether the two differ on this content.

One discrepancy worth resolving before anyone patches. The "Before" block in the description lists only font-size, color and line-height, and the live rule at

​https://profiles.wordpress.org/wp-content/themes/profiles.wordpress.org/style.css?ver=1784669933

matches that exactly, with no wrapping property of any kind. But the screenshot attached to this ticket shows a fourth declaration, word-wrap: break-word, sourced from style.css?ver=...669931. Those are two different builds. It would be worth confirming which one production is serving, in case the property was present at some point and has since been dropped.

Screenshots/Screencast with results

• 8395-overflow-reproduced-385-to-472.png, before. The URL running off the card edge, with the console showing overflowing: 1 and 385 -> 472.
• 8395-overflow-wrap-alone-fixes-it.png, after. overflow-wrap: anywhere injected on its own, console showing overflowing: 0, and the URL wrapped inside the card.