From 0bd24f652d641f66185a401e2b42d705da308317 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 12 Apr 2025 16:11:00 +0800
Subject: [PATCH] feat(NewContextButton): add styled container for responsive
 design

- Introduced a styled container to the NewContextButton component to hide it on smaller screens (max-width: 800px).
- Ensured the tooltip and button functionality remain intact while enhancing the component's layout.
---
 .../pages/home/Inputbar/NewContextButton.tsx  | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx b/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
index eb22ec5b..e0d6454f 100644
--- a/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
@@ -3,6 +3,7 @@ import { useShortcut, useShortcutDisplay } from '@renderer/hooks/useShortcuts'
 import { Tooltip } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
 interface Props {
   onNewContext: () => void
@@ -16,12 +17,20 @@ const NewContextButton: FC<Props> = ({ onNewContext, ToolbarButton }) => {
   useShortcut('toggle_new_context', onNewContext)
 
   return (
-    <Tooltip placement="top" title={t('chat.input.new.context', { Command: newContextShortcut })} arrow>
-      <ToolbarButton type="text" onClick={onNewContext}>
-        <PicCenterOutlined />
-      </ToolbarButton>
-    </Tooltip>
+    <Container>
+      <Tooltip placement="top" title={t('chat.input.new.context', { Command: newContextShortcut })} arrow>
+        <ToolbarButton type="text" onClick={onNewContext}>
+          <PicCenterOutlined />
+        </ToolbarButton>
+      </Tooltip>
+    </Container>
   )
 }
 
+const Container = styled.div`
+  @media (max-width: 800px) {
+    display: none;
+  }
+`
+
 export default NewContextButton