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({
{name}
+ {userId}
{time}
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);
}
}