Merge pull request #2171 from Yidadaa/bugfix-0627

fix: #2149 try to fix ChatAction style on ios mobile

app/components/chat.module.scss

@@ -281,15 +281,13 @@
   border: var(--border-in-light);
   position: relative;
   transition: all ease 0.3s;
-  min-width: 0;
 
   &:hover {
-    min-width: 330px;
-
     .chat-message-actions {
-      height: 40px;
       opacity: 1;
       transform: translateY(0px);
+      max-width: 100%;
+      height: 40px;
 
       .chat-message-action-date {
         opacity: 0.3;
@@ -299,7 +297,6 @@
 
   .chat-message-actions {
     display: flex;
-    width: 100%;
     box-sizing: border-box;
     font-size: 12px;
     align-items: flex-end;
@@ -308,11 +305,21 @@
     transform: translateY(10px);
     opacity: 0;
     height: 0;
+    max-width: 0;
+
+    .chat-input-actions {
+      display: flex;
+      flex-wrap: nowrap;
+    }
   }
 
   .chat-message-action-date {
+    white-space: nowrap;
+    transition: all ease 0.6s;
     color: var(--black);
     opacity: 0;
+    text-align: right;
+    margin-left: 20px;
   }
 }
 

app/components/chat.tsx

@@ -310,7 +310,7 @@ function ChatAction(props: {
   }
 
   useEffect(() => {
-    updateWidth();
+    setTimeout(updateWidth, 100);
   }, []);
 
   return (
@@ -937,30 +937,30 @@ export function Chat() {
                             />
                           ) : (
                             <>
-                              <ChatAction
-                                text={Locale.Chat.Actions.Delete}
-                                icon={<DeleteIcon />}
-                                onClick={() => onDelete(message.id ?? i)}
-                              />
-
                               <ChatAction
                                 text={Locale.Chat.Actions.Retry}
                                 icon={<ResetIcon />}
                                 onClick={() => onResend(message.id ?? i)}
                               />
 
+                              <ChatAction
+                                text={Locale.Chat.Actions.Delete}
+                                icon={<DeleteIcon />}
+                                onClick={() => onDelete(message.id ?? i)}
+                              />
+
                               <ChatAction
                                 text={Locale.Chat.Actions.Pin}
                                 icon={<PinIcon />}
                                 onClick={() => onPinMessage(message)}
                               />
+                              <ChatAction
+                                text={Locale.Chat.Actions.Copy}
+                                icon={<CopyIcon />}
+                                onClick={() => copyToClipboard(message.content)}
+                              />
                             </>
                           )}
-                          <ChatAction
-                            text={Locale.Chat.Actions.Copy}
-                            icon={<CopyIcon />}
-                            onClick={() => copyToClipboard(message.content)}
-                          />
                         </div>
 
                         <div className={styles["chat-message-action-date"]}>