element-web icon indicating copy to clipboard operation
element-web copied to clipboard

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

Open HarHarLinks opened this issue 3 years ago • 1 comments

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:

image

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.

HarHarLinks avatar Apr 26 '22 17:04 HarHarLinks

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

ritikBhandari avatar May 30 '22 17:05 ritikBhandari

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?

image

HarHarLinks avatar Jan 30 '23 17:01 HarHarLinks