Merge pull request #177 from lobehub/platform-optimize

feat: optimize mobile style
lobehub · Dec 3, 2024 · a5d5797 · a5d5797
2 parents 25f1fb9 + a9dae79
commit a5d5797
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/src/app/chat/ChatMode/MessageInput/index.tsx b/src/app/chat/ChatMode/MessageInput/index.tsx
@@ -1,6 +1,6 @@
 import { SendOutlined } from '@ant-design/icons';
 import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { ChevronUp, CornerDownLeft, LucideCommand } from 'lucide-react';
 import React, { memo } from 'react';
@@ -77,7 +77,9 @@ const InputArea = memo((props: InputAreaProps) => {
         <Camera />
       </Flexbox>
       <Flexbox horizontal justify={'space-between'} align={'center'} style={{ marginTop: 4 }}>
-        <div className={styles.alert}>{t('input.alert')}</div>
+        <Typography.Text className={styles.alert} ellipsis>
+          {t('input.alert')}
+        </Typography.Text>
         {ShortCuts}
       </Flexbox>
     </Flexbox>

diff --git a/src/app/chat/ChatMode/MessageInput/style.ts b/src/app/chat/ChatMode/MessageInput/style.ts
@@ -2,6 +2,7 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
   alert: css`
+    width: 100%;
     color: ${token.colorTextTertiary};
   `,
 }));
diff --git a/src/app/chat/ChatMode/style.ts b/src/app/chat/ChatMode/style.ts
@@ -9,7 +9,7 @@ export const useStyles = createStyles(({ css, token, responsive }) => ({
   `,
   input: css`
     width: ${CHAT_INPUT_WIDTH};
-    min-width: 480px;
+    min-width: 360px;
     max-width: 100vw;
 
     ${responsive.mobile} {

diff --git a/src/features/ChatItem/index.tsx b/src/features/ChatItem/index.tsx
@@ -18,7 +18,7 @@ import { renderMessages } from './Messages';
 const useStyles = createStyles(({ css, prefixCls, responsive }) => ({
   message: css`
     width: 100%;
-    min-width: 480px;
+    min-width: 360px;
     max-width: ${CHAT_INPUT_WIDTH};
     margin: 0 auto;
     // prevent the textarea too long