Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-24 18:50:56 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: floating-sidebar header sticky (#6371)

Browse Source
This commit is contained in:
SuYao 2025-05-24 08:55:20 +08:00 committed by GitHub
parent a98381ec8a
commit f6e9b80f9c
4 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/src/assets/styles/color.scss
View File

@ -60,6 +60,7 @@
--assistants-width: 275px;
--topic-list-width: 275px;
--settings-width: 250px;
--scrollbar-width: 5px;
--chat-background: #111111;
--chat-background-user: #28b561;

8
src/renderer/src/components/Popups/FloatingSidebar.tsx
View File

@ -5,8 +5,6 @@ import { FC, useEffect, useState } from 'react'
import { useHotkeys } from 'react-hotkeys-hook'
import styled from 'styled-components'
import Scrollbar from '../Scrollbar'
interface Props {
children: React.ReactNode
activeAssistant: Assistant
@ -55,7 +53,8 @@ const FloatingSidebar: FC<Props> = ({
forceToSeeAllTab={true}
style={{
background: 'transparent',
border: 'none'
border: 'none',
maxHeight: maxHeight
}}
/>
</PopoverContent>
@ -81,9 +80,8 @@ const FloatingSidebar: FC<Props> = ({
)
}
const PopoverContent = styled(Scrollbar)<{ maxHeight: number }>`
const PopoverContent = styled.div<{ maxHeight: number }>`
max-height: ${(props) => props.maxHeight}px;
overflow-y: auto;
`
export default FloatingSidebar

6
src/renderer/src/pages/home/Chat.tsx
View File

@ -36,9 +36,9 @@ const Chat: FC<Props> = (props) => {
const maxWidth = useMemo(() => {
const showRightTopics = showTopics && topicPosition === 'right'
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
const minusAssistantsWidth = showAssistants ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
const minusRightTopicsWidth = showRightTopics ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
}, [showAssistants, showTopics, topicPosition])
useHotkeys('esc', () => {

6
src/renderer/src/pages/home/Messages/Messages.tsx
View File

@ -86,9 +86,9 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
const maxWidth = useMemo(() => {
const showRightTopics = showTopics && topicPosition === 'right'
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
const minusAssistantsWidth = showAssistants ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
const minusRightTopicsWidth = showRightTopics ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
}, [showAssistants, showTopics, topicPosition])
const scrollToBottom = useCallback(() => {