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.
This commit is contained in:
parent
0e7c4e4bdd
commit
0bd24f652d
@ -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 (
|
||||
<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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user