optimize: chat

src/ui/WaitRoom/Chat.module.scss

@@ -16,10 +16,8 @@
 }
 
 .dialogs {
+  position: absolute;
   padding: 8px 0;
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-  max-height: 85vh;
   .item {
     vertical-align: baseline;
     .name {

src/ui/WaitRoom/Chat.tsx

@@ -20,9 +20,8 @@ export const Chat: React.FC = () => {
   const chat = useSnapshot(chatStore);
 
   useEffect(() => {
-    if (chatStore.sender >= 0 && chatStore.message.length != 0) {
-      const now = new Date();
-      const sender = chatStore.sender;
+    if (chatStore.sender >= 0 && chatStore.message.length !== 0) {
+      const { sender } = chatStore;
       const name =
         sender < roomStore.players.length
           ? roomStore.players[sender]?.name ?? "?"
@@ -33,7 +32,7 @@ export const Chat: React.FC = () => {
         ...prev,
         {
           name: name,
-          time: `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`,
+          time: formatTimeToHHMMSS(),
           content: chatStore.message,
         },
       ]);
@@ -81,3 +80,11 @@ const DialogItem: React.FC<ChatItem> = ({ name, time, content }) => {
     </div>
   );
 };
+
+function formatTimeToHHMMSS() {
+  const now = new Date();
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+  const seconds = String(now.getSeconds()).padStart(2, "0");
+  return `${hours}:${minutes}:${seconds}`;
+}