Improve styling of message timestamps.

src/modules/room/RoomChatMessageList.tsx

@@ -7,33 +7,42 @@ interface Props {
   messages: RoomMessage[];
 }
 
-const messageShape = "px-3 py-1 rounded-xl";
+const kCommonChildClass = "py-1 max-w-3/4 flex flex-col";
+
+const kCommonMessageClass = "px-3 py-1 rounded-xl";
+
+function formatReceivedAt(receivedAt: Date | null): string {
+  if (receivedAt === null) {
+    return "sending...";
+  }
+
+  return receivedAt.toLocaleTimeString();
+}
 
 const RoomChatMessageList: FC<Props> = ({ loginUserName, messages }) => {
   // Append all messages in the chat room.
   const children = [];
   let i = 0;
   for (const { userName, message, receivedAt } of messages) {
-    let time = "";
-    if (receivedAt !== null) {
-      time = receivedAt.toLocaleTimeString();
-    }
+    const time = <div className="text-xs">{formatReceivedAt(receivedAt)}</div>;
 
     if (userName === loginUserName) {
       children.push(
-        <li key={i} className="self-end py-1 max-w-3/4">
+        <li key={i} className={`${kCommonChildClass} self-end items-end`}>
           {time}
-          <div className={`bg-yellow-600 text-white ${messageShape}`}>
+          <span className={`${kCommonMessageClass} bg-yellow-600 text-white`}>
             {message}
-          </div>
+          </span>
         </li>
       );
     } else {
       children.push(
-        <li key={i} className="self-start py-1 max-w-3/4">
+        <li key={i} className={`${kCommonChildClass} self-start items-start`}>
           {time}
           <div className="text-sm text-yellow-600 px-1 py-1">{userName}</div>
-          <div className={`bg-yellow-100 ${messageShape}`}>{message}</div>
+          <div className={`${kCommonMessageClass} bg-yellow-100`}>
+            {message}
+          </div>
         </li>
       );
     }