Merge pull request #2132 from Yidadaa/bugfix-0625

feat: align chat page title center on mobile screen

app/components/chat.module.scss

@@ -3,7 +3,6 @@
 .chat-input-actions {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 10px;
 
   .chat-input-action {
     display: inline-flex;
@@ -328,6 +327,12 @@
   flex-direction: column;
   border-top: var(--border-in-light);
   box-shadow: var(--card-shadow);
+
+  .chat-input-actions {
+    .chat-input-action {
+      margin-bottom: 10px;
+    }
+  }
 }
 
 @mixin single-line {
@@ -400,6 +405,8 @@
   padding: 10px 90px 10px 14px;
   resize: none;
   outline: none;
+  box-sizing: border-box;
+  min-height: 68px;
 }
 
 .chat-input:focus {

app/components/chat.tsx

@@ -795,6 +795,19 @@ export function Chat() {
   return (
     <div className={styles.chat} key={session.id}>
       <div className="window-header" data-tauri-drag-region>
+        {isMobileScreen && (
+          <div className="window-actions">
+            <div className={"window-action-button"}>
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Chat.Actions.ChatList}
+                onClick={() => navigate(Path.Home)}
+              />
+            </div>
+          </div>
+        )}
+
         <div className="window-header-title">
           <div
             className={`window-header-main-title " ${styles["chat-body-title"]}`}
@@ -807,21 +820,15 @@ export function Chat() {
           </div>
         </div>
         <div className="window-actions">
-          <div className={"window-action-button" + " " + styles.mobile}>
+          {!isMobileScreen && (
-            <IconButton
+            <div className="window-action-button">
-              icon={<ReturnIcon />}
+              <IconButton
-              bordered
+                icon={<RenameIcon />}
-              title={Locale.Chat.Actions.ChatList}
+                bordered
-              onClick={() => navigate(Path.Home)}
+                onClick={renameSession}
-            />
+              />
-          </div>
+            </div>
-          <div className="window-action-button">
+          )}
-            <IconButton
-              icon={<RenameIcon />}
-              bordered
-              onClick={renameSession}
-            />
-          </div>
           <div className="window-action-button">
             <IconButton
               icon={<ExportIcon />}

app/locales/cn.ts

@@ -17,7 +17,7 @@ const cn = {
     ChatItemCount: (count: number) => `${count} 条对话`,
   },
   Chat: {
-    SubTitle: (count: number) => `与 ChatGPT 的 ${count} 条对话`,
+    SubTitle: (count: number) => `共 ${count} 条对话`,
     Actions: {
       ChatList: "查看消息列表",
       CompressedHistory: "查看压缩后的历史 Prompt",

app/locales/en.ts

@@ -18,7 +18,7 @@ const en: LocaleType = {
     ChatItemCount: (count: number) => `${count} messages`,
   },
   Chat: {
-    SubTitle: (count: number) => `${count} messages with ChatGPT`,
+    SubTitle: (count: number) => `${count} messages`,
     Actions: {
       ChatList: "Go To Chat List",
       CompressedHistory: "Compressed History Memory Prompt",

app/styles/window.scss

@@ -26,12 +26,16 @@
     font-size: 14px;
     margin-top: 5px;
   }
+
+  @media screen and (max-width: 600px) {
+    text-align: center;
+  }
 }
 
 .window-actions {
   display: inline-flex;
 }
 
-.window-action-button {
+.window-action-button:not(:first-child) {
   margin-left: 10px;
 }