From c9b1a062ce621739e4323f36f1959f27861b380c Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Wed, 11 Aug 2021 13:58:53 +0530
Subject: [PATCH] show mxId on hover over displayname

---
 src/app/molecules/message/Message.jsx  |  1 +
 src/app/molecules/message/Message.scss | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 1e169bd..6b332c6 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -72,6 +72,7 @@ function MessageHeader({
     <div className="message__header">
       <div style={{ color }} className="message__profile">
         <Text variant="b1">{name}</Text>
+        <Text variant="b1">{userId}</Text>
       </div>
       <div className="message__time">
         <Text variant="b3">{time}</Text>
diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 73484cf..2ee04c6 100644
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -104,7 +104,6 @@
   align-items: baseline;
 
   & .message__profile {
-    flex: 1;
     min-width: 0;
     color: var(--tc-surface-high);
     margin-right: var(--sp-tight);
@@ -121,10 +120,19 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    & > .text:last-child { display: none; }
+    &:hover {
+      & > .text:first-child { display: none; }
+      & > .text:last-child { display: block; }
+    }
   }
 
   & .message__time {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
     & > .text {
+      white-space: nowrap;
       color: var(--tc-surface-low);
     }
   }