Use monospace font for room, message IDs in View Source modal

[HarHarLinks]

Your use case

What would you like to do?

To maximize readability, room and message IDs in the view event source dialogue should use the monospace font.

It could look like this, though my vertical alignment is off:

How would you like to achieve it?

Here is the part in the code:
https://github.com/matrix-org/matrix-react-sdk/blob/e718242912e2d063a66abc05c2fcab53db18569c/src/components/structures/ViewSource.tsx#L170-L179

1. put labels and IDs in their own element classes
2. apply monospace font to IDs
3. ensure the labels have the same width for alignment (they do coincidentally with that font, but probably still should)

Have you considered any alternatives?

No response

Additional context

Would it make sense to do this for MXIDs as well? With the Inter font, capital i and lower case L are indistinguishable. This could combat impersonation attempts.

[ritikBhandari]

Hi,
Can I take up this issue? I'd like to work on it.

[HarHarLinks]

Thank you @paragpoddar for working on this :)

Personally, I wish the labels were still aligned (as mentioned in OP). @t3chguy is that something you'd consider?