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.

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>
+    <Container>
-      <ToolbarButton type="text" onClick={onNewContext}>
+      <Tooltip placement="top" title={t('chat.input.new.context', { Command: newContextShortcut })} arrow>
-        <PicCenterOutlined />
+        <ToolbarButton type="text" onClick={onNewContext}>
-      </ToolbarButton>
+          <PicCenterOutlined />
-    </Tooltip>
+        </ToolbarButton>
+      </Tooltip>
+    </Container>
   )
 }
 
+const Container = styled.div`
+  @media (max-width: 800px) {
+    display: none;
+  }
+`
+
 export default NewContextButton