From 6ff8788241070a882b61b06d35db4c6a51cbfc8b Mon Sep 17 00:00:00 2001
From: the-khalid <thekhalid06@gmail.com>
Date: Mon, 23 Jan 2023 13:46:46 +0530
Subject: [PATCH] Updated ViewSource.tsx

---
 CHANGELOG.md                             | 8 +++++++-
 src/components/structures/ViewSource.tsx | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 495f538aef6..7b911b26531 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,10 @@
-Changes in [3.64.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.64.2) (2023-01-20)
+Changes in 3.64.3
+=====================================================================================================
+
+## ✨ Features
+ * Applied monospace font to maximize readability, room and message IDs in the view event source dialogue.
+ 
+ Changes in [3.64.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.64.2) (2023-01-20)
 =====================================================================================================
 
 ## 🐛 Bug Fixes
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index 245c1587c58..62ff26367b3 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -153,10 +153,10 @@ export default class ViewSource extends React.Component<IProps, IState> {
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
                 <div className="mx_ViewSource_header">
                     <CopyableText getTextToCopy={() => roomId} border={false}>
-                        {_t("Room ID: %(roomId)s", { roomId })}
+                        {_t("Room ID: %(roomId)s", <span style='font-family: monospace'>{ roomId }</span>)}
                     </CopyableText>
                     <CopyableText getTextToCopy={() => eventId} border={false}>
-                        {_t("Event ID: %(eventId)s", { eventId })}
+                        {_t("Event ID: %(eventId)s", <span style='font-family: monospace'>{ eventId }</span>)}
                     </CopyableText>
                     {mxEvent.threadRootId && (
                         <CopyableText getTextToCopy={() => mxEvent.threadRootId!} border={false}>