show mxId on hover over displayname

diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 1e169bd1dea67ba5a92d19fd06e691f8017057de..6b332c6661a46b9612c799b46497f7dd0027093f 100644 (file)
--- 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 73484cf1381996d8d9623f3f2eea3851d902f5b1..2ee04c679f05c5caf3bfe6746e18e33a1563e373 100644 (file)
--- 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);
     }
   }