added spaces between texts

Author: darrenmo12309

client/src/components/TextChat.jsx

@@ -142,39 +142,45 @@ function MessageComp({ attribute, showNickname, showTitle }) {
             <p className="text-sm">{msg.text}</p>
           </div>
           <button
-            className="absolute -bottom-6 right-0 text-lg hover:bg-gray-200 rounded-full px-2 py-1 transition"
+            className="absolute -bottom-8 right-0 text-lg hover:bg-gray-200 rounded-full px-2 py-1 transition"
             title="React"
             onClick={() => { }}
           >
             😐
           </button>
         </div>
-        <div class="spacer"></div>
+        <div className="h-4" />
       </div>
     );
   }
 
   return (
     <div className="flex justify-start my-2">
       <div className="relative flex flex-col items-start max-w-[50%]">
-        <span className="absolute -top-5 left-0 text-xs font-bold text-gray-700">
-          {showNickname && msg.sender.name}
-        </span>
-        <span className="absolute -top-5 right-0 text-xs text-gray-400">
-          {ts && relTime(ts)}
+        <span className="absolute -top-5 left-0 flex items-center gap-1 text-xs">
+          {showNickname && (
+            <span className="font-bold text-gray-700">
+              {msg.sender.name}
+            </span>
+          )}
+          {ts && (
+            <span className="text-gray-400 font-normal">
+              {relTime(ts)}
+            </span>
+          )}
         </span>
         <div className="bg-gray-100 text-black-900 px-4 py-2 rounded-xl rounded-tl-none shadow group" style={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}>
           <p className="text-sm">{msg.text}</p>
         </div>
         <button
-          className="absolute -bottom-6 right-0 text-lg hover:bg-gray-200 rounded-full px-2 py-1 transition"
+          className="absolute -bottom-8 right-0 text-lg hover:bg-gray-200 rounded-full px-2 py-1 transition"
           title="React"
           onClick={() => { }}
         >
           😐
         </button>
       </div>
-      <div class="spacer"></div>
+      <div className="h-4" />
     </div>
   );
 }