Invite dialog: display MXID on its own line

[AndrewFerr]

The reason for doing this is to make the invite dialog more readable when the inviter's MXID is very long, which tends to be the case when the inviter is a bridged user with a machine-generated MXID.

Screenshots

DM invite

Before

After

Room invite

Before

After

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

Here's what your changelog entry will look like:

✨ Features

• Invite dialog: display MXID on its own line (#11756). Contributed by @AndrewFerr.

[t3chguy]

these don't have keys so shouldn't be an array, use a React Fragment instead please

[AndrewFerr]

subTitle currently has a type of string | ReactNode[] | undefined; is a React Fragment a ReactNode[] or should the type of subTitle be expanded to include it?

And is something like the below what you're after? It's a pattern used elsewhere in this function.

subTitle = [
    <>
        {avatar}
        {inviterElement}
    </>,
];

[t3chguy]

Fragment would qualify as ReactNode, but if using an array must be given a key otherwise https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Your snippet would work but would trigger the warning due to missing a key

[t3chguy]

Oh looks like the code further down inserts a key based on position, that's not ideal but good enough

subTitleElements = subTitle.map((t, i) => <p key={subTitle${i}}>{t}</p>);