Fix: Allow triple-click text selection to flow around pills

[AlirezaMrtz]

Fixes #30296

Fixes an issue where triple clicking to select message text would stop at pills instead of selecting the entire line.

Changes made:

• Changed .mx_Pill display from inline-flex to inline to allow proper text flow
• Added user-select: text to .mx_BaseAvatar to ensure avatars don't block selection
• Adjusted avatar vertical alignment with vertical-align: -2.5px to maintain visual consistency

Before/After

Before: Triple clicking a message line would stop selection at pill boundaries
After: Triple clicking selects the entire message line as expected

Testing Strategy

1. Find any message containing a pill (keyword pill, user pill, message pill, room pill, etc.)
2. Triple click on the message line
3. Verify that the entire line is selected, not just text up to the pill

Checklist

• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

[dbkr]

• Changing the alignment was necessary to compensate for the change from inline-flex to inline?
• What is 'allow proper text flow' - is this related to the triple click selection or a different fix?
• A test of some kind would be great for this, otherwise it's just going to get broken again.
• You also have some other end to end test failures.

[MidhunSureshR]

Your test failures are mostly because you did not update the screenshots. I'm not sure if you really intended to change the size of the pill, if you did, you need to run yarn test:playwright:screenshots.

[AlirezaMrtz]

* Changing the alignment was necessary to compensate for the change from inline-flex to inline?

Yes, changing to inline-block caused the avatar to shift vertically since we no longer get align-items: center from inline-flex. The vertical-align: -2.5px was added to visually match the previous centering and maintain the same appearance.

* What is 'allow proper text flow' - is this related to the triple click selection or a different fix?

It is related to the triple click selection. I mean maintaining text continuity so that triple click selection works as users expect.

* You also have some other end to end test failures.

I solved them by changing inline to inline-block.

[AlirezaMrtz]

Your test failures are mostly because you did not update the screenshots. I'm not sure if you really intended to change the size of the pill, if you did, you need to run yarn test:playwright:screenshots.

I didn’t intend to change the pill size. I changed inline to inline-block, and with that change the tests still pass using the existing screenshots.

[dbkr]

Thanks for fixing the tests. Ideally this would also add a test for the triple click behaviour so that doesn't regress, if possible?

[AlirezaMrtz]

Thanks for fixing the tests. Ideally this would also add a test for the triple click behaviour so that doesn't regress, if possible?

Added a test for it.

[dbkr]

That's great, thank you!