From d5c33a11839d45990a0da0d015de445bf0b59789 Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Tue, 27 Jun 2023 23:07:12 +0800
Subject: [PATCH 1/2] fix: #2149 try to fix ChatAction style on ios mobile

---
 app/components/chat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index ad38dd65..15303124 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -310,7 +310,7 @@ function ChatAction(props: {
   }
 
   useEffect(() => {
-    updateWidth();
+    setTimeout(updateWidth, 100);
   }, []);
 
   return (

From 38c8ee8cd2b9689ad7499a99cc79edf2374c17dd Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Tue, 27 Jun 2023 23:29:53 +0800
Subject: [PATCH 2/2] feat: improve message item buttons style

---
 app/components/chat.module.scss | 17 ++++++++++++-----
 app/components/chat.tsx         | 22 +++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index c3e7c619..b908f220 100644
--- a/app/components/chat.module.scss
+++ b/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;
   }
 }
 
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 15303124..81dadd8d 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -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"]}>